растянуть div float left

13

alibabaevich

8 октября 2009, 19:18

7449

Здравствуйте! Помогите, как растянуть блок див с float left до начала следующего объекта.

Т.е. есть код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Untitled Document</title>

<style>

#left-block {

	float: left;

	width: 300px;

	background-color: #BFBFBF;

}

#content {

	border-bottom: 1px solid #000;

	float: left;

}

#right-block {

	float: right;

	width: 300px;

	background-color: #BFBFBF;

}

</style>

</head>

<body>

<div id="container">

  <div id="left-block"> &nbsp; </div>

  <div id="content">some content</div>

  <div id="right-block"> &nbsp; </div>

</div>

</body>

</html>

Мне нужно, чтобы блок div c id="content" растягивался до начала правого блока, а то он сейчас размером с текст внутри него.

Спасибо!

73

su-root

8 октября 2009, 19:21

#1

Задайте размер!

Если используете пиксели, то сделаете не резиновым, а если резиновый, то используйте %

Кто ищет смысл, пусть сидит на небесах - в своих глазах!

194

Prior

8 октября 2009, 19:26

#2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Untitled Document</title>

<style>

#left-block {

  float: left;

  width: 300px;

  background-color: #BFBFBF;

}

#content {

  border-bottom: 1px solid #000;

}

#right-block {

  float: right;

  width: 300px;

  background-color: #BFBFBF;

}

</style>

</head>

<body>

<div id="container">

  <div id="left-block"> &nbsp; </div>

  <div id="right-block"> &nbsp; </div>

  <div id="content">some content</div>



</div>

</body>

</html>

Можно так попробовать.

Ответы на вопрос - https://answers.net.pl

A

13

alibabaevich

8 октября 2009, 19:29

#3

Ах да, забыл дописать... Дело в том, что макет - резиновый. Незнаю, как указать размер. Если так:

#content {

border-bottom: 1px solid #000;

float: left;

width: 100%;

}

то div#content растягивается на всю ширину браузера. А мне нужно, чтобы от левого блока, к правому блоку.

Я вот думаю пример не совсем точный написал. Дело в том, что левый блок тоже резиновый должен быть.

#left-block {

float: left;

width: 20%;

background-color: #BFBFBF;

}

alibabaevich добавил 08.10.2009 в 23:31

Prior:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Untitled Document</title>

<style>

#left-block {

  float: left;

  width: 300px;

  background-color: #BFBFBF;

}

#content {

  border-bottom: 1px solid #000;

}

#right-block {

  float: right;

  width: 300px;

  background-color: #BFBFBF;

}

</style>

</head>

<body>

<div id="container">

  <div id="left-block"> &nbsp; </div>

  <div id="right-block"> &nbsp; </div>

  <div id="content">some content</div>



</div>

</body>

</html>

Можно так попробовать.

Так div#content растягивается на всю ширину браузера.

194

Prior

8 октября 2009, 19:49

#4

alibabaevich:
Так div#content растягивается на всю ширину браузера.

Семен-семеныч! (с)

а свойство margin тогда зачем?

margin:0 300px 0 300px;

95

Ткач

8 октября 2009, 19:51

#5

блоку контен ставите свойство маржин, отступ от левого края и правого по ширине левого и правого соответственно, а внутрь кладете ещё один блок которому указываете что это и есть 100 %.

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)

A

13

alibabaevich

8 октября 2009, 19:55

#6

Ну это я понял ))

А если у меня размер левого блока - неизвестен. Как тогда поступить?

Допустим левый блок растягивается от контента внутри. Как быть в этом случае?

95

Ткач

8 октября 2009, 19:57

#7

alibabaevich:
Ну это я понял ))
А если у меня размер левого блока - неизвестен. Как тогда поступить?
Допустим левый блок растягивается от контента внутри. Как быть в этом случае?

как такое может быть? у дивов нет ширины - если ты её не укажешь (неважно как в пикселах или в процентах)

иначе на разных разрешениях монитора будет непредсказуемый сюрприз

A

13

alibabaevich

8 октября 2009, 20:05

#8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Untitled Document</title>

<style>

#left {

	border: 1px solid #000;

	float: left;

}

#content {

	float: left;

}

#right {

	float: right;

	border: 1px solid #000;

}

</style>

</head>

<div id="left">Заголовок</div>

<div id="content">Некоторый контент</div>

<div id="right">Правый блок</div>

</body>

</html>

Ну вот я левому и правому блоку не указывал размер. Блоки получаются по длине текста внутри.

alibabaevich добавил 09.10.2009 в 00:07

Вот к примеру как в таком случае центральный блок растянуть на всю оставшуюся ширину?

194

Prior

8 октября 2009, 20:15

#9

Используя только блочную верстку не получится сделать отступ по ширине блока, для которого не задана ширина. (яваскриптом разве что)

Используйте таблицу в этом случае.

A

13

alibabaevich

8 октября 2009, 20:22

#10

Ок. Спасибо за помощь.

Буду делать таблицей.

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Все что нужно знать о DDоS-атаках грамотному менеджеру