Растягивание div блока

Andyk · February 19, 2011

И снова здравствуйте. Нуждаюсь в вашей помощи.

<div class="a1">

<div class="a2"></div>

<div class="a3"></div>

</div>

.a1 {
width: 100%;
display: inline-block;
}

.a2 {
background: url("{T_THEME_PATH}/images/logogo.jpg");
background-position: center;
height: 300px;
border: 1px solid #BFBFBF;
display: inline-block;
float: left;
overflow: hidden;
display: inline-block;
}

.a3 {
overflow: hidden;
float: right;
height: 300px;
background-image: url("{T_THEME_PATH}/images/bg_tex2.jpg");
border: 1px solid #BFBFBF;
display: inline-block;
}

В блоке a2 фоном изображение, которое может растягиваться на 100% ширины. В блоке a3 желательно указать фиксированную ширину в px. И собственно вопрос, как заставить блок a2 растягиваться, как заполнить им всю пустоту?

Можно указать ширину в %, но учитывая разницу между монитором 1024*768 и 1920*1200 блок а3 выходит очень "сжатым" в первом варианте и "пустым" во втором.

Andyk · February 20, 2011

С помощью css этого не сделать? Или я что-то не так написал?

Veseloff · February 20, 2011

Ссылку на страницу в студию!

Andyk · February 20, 2011

Вот

swetlana · February 20, 2011

А почему бы фон не повесить на a1?

Andyk · February 20, 2011

Я уже думал так сделать. Но, на фоне будет еще форма поиска + лого + описание. И по задумке этот блок должен быть оформлен (бордер, обводка, отступы) как и блок a3, а это уже не получится.

swetlana · February 20, 2011

Всё непонятнее и непонятнее.

Макет в студию!

Andyk · February 20, 2011

Selen · February 21, 2011

А если обойтись двумя блоками. И использовать вариант описанный здесь http://htmlbook.ru/content/dve-kolonki-navigatsiya-sprava.

В резиновый блок установить повторяющийся фон или цельный фон максимально возможной ширины

Edited February 21, 2011 by Selen

Andyk · February 21, 2011

Вариант. Только right: 0 для блока a3 не работает, прижимает к окну браузера, а нужно прижать к краю a1.

Нет, не вариант. Лезут косяки в других браузерах.

И такой же результат можно получить сделав

А почему бы фон не повесить на a1?

Edited February 21, 2011 by Andyk

Andyk · February 21, 2011

Решил обернуть a3 в еще один div. Ширину ему указать в процентах оставшихся от a2 с фоном. Что делать с пустотой при разных разрешениях монитора хз.

runet · February 21, 2011

Насколько я тебя понял, тебе нужно чтобы блок a2 был вплотную к блоку a3.

Колос · February 21, 2011

Посмотри такой способ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>растяжение</title>
  <style>
	.a1 
	{
	  width: 100%;
	  background-color:#CCC;
	}
   .a2 
   {
	 background-color:#0F0;
	 height: 100px;
	 overflow: hidden;
   }

  .a3 
  {
	width:200px;
	height: 50px;
	background-color:#F00;
	float:right;
  }
  </style>
</head>
<body>
<div class="a1">
  <div class="a3"></div>
  <div class="a2"></div>
</div>
</body>
</html>

Andyk · February 21, 2011

Аналогично варианту с фоном на а1. В идеале хотел чтобы а2 заполнял всю пустоту и имел свои бордеры и отступы. Снова все переделал и вернулся к фону на а1. Гемор какой-то

Колос · February 21, 2011

Аналогично варианту с фоном на а1. В идеале хотел чтобы а2 заполнял всю пустоту и имел свои бордеры и отступы. Снова все переделал и вернулся к фону на а1. Гемор какой-то

Насчёт пустоты не понял. Вроде в моём примере a2 заполняет пространство от левого края a1 до a3. И что мешает сейчас задать отступы и границы?

Andyk · February 21, 2011

Беру свои слова назад. Ваш вариант полностью мне подходит, невнимательно посмотрел сразу.

Спасибо.

Sign In

Растягивание div блока

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information