Почему сносить центральную колонку?

sergiyko · September 22, 2009

Зравствуйте!

Имею код

<div style="width: 100%;">
	<div style="width: 120px; height: 150px; background-color: red; float: left;">
	1
	</div>
	<div style="font-size: 40px; float: left;">
	 dsadsad sad sadas d d ad asdsadsad fdg dfsasds fdg dfdg df gdf gdfg
	</div> 
	<div style="width: 120px; height: 150px; background-color: red; float: right;">
	2
	</div>
</div>

Если не указать явно ширину центрального дива, то его сносит. Как на картинке

Как можно сделать, чтобы не указывая явно ширину не сносило див? Чтобы то, что не влезло в рядок, переходило на следующий ряд. Так:

А вообще код правильно написан?

Edited September 22, 2009 by sergiyko

psywalker · September 22, 2009

Зравствуйте!
Имею код
<div style="width: 100%;">
	<div style="width: 120px; height: 150px; background-color: red; float: left;">
	1
	</div>
	<div style="font-size: 40px; float: left;">
	 dsadsad sad sadas d d ad asdsadsad fdg dfsasds fdg dfdg df gdf gdfg
	</div> 
	<div style="width: 120px; height: 150px; background-color: red; float: right;">
	2
	</div>
</div>
Если не указать явно ширину центрального дива, то его сносит. Как на картинке
Как можно сделать, чтобы не указывая явно ширину не сносило див? Чтобы то, что не влезло в рядок, переходило на следующий ряд. Так:
А вообще код правильно написан?

Задумайся о своих ошибках :blink:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 500px;}
	div.right,
	div.left { float: right; width: 200px; background: red;}
		div.left { float: left;}
	div.content { 
		overflow: hidden;
		background: #0F3;
		zoom: 1; /* ДЛя ИЕ6 */
	}
</style>

</head>

<body>
	<div class="right">RIGHT</div>
	<div class="left">LEFT</div>
	<div class="content">CONTENT</div>
</body>
</html>

gesandte · September 22, 2009

резиной все сделай

mini · September 22, 2009

резиной все сделай

как вариант заюзай этот ресурс :blink: http://blog.html.it/layoutgala/

sergiyko · September 29, 2009

Спасибо большое!

Есть еще один ламерский вопрос.

Такой код

<a href="">
		<div style="padding: 5px 10px; width: 100px;  background-color: yellow;">
			test
		</div>
	</a>

Получается такой блок желтый шириной 100 пикселей. Но ссылка почему-то уходит за пределы этого блока и идет аж до конца окна. Там пусто, но кликать можно. Почему так происходит? И как можно исправить это? Или сделать как-то по другому.

s0rr0w · September 29, 2009

Такой код

<a href="">
		<div style="padding: 5px 10px; width: 100px;  background-color: yellow;">
			test
		</div>
	</a>

Такой код является грубым нарушением HTML. Нельзя в строчные элементы вкладывать блочные.

ZODIAK93 · September 29, 2009

Спасибо большое!
Есть еще один ламерский вопрос.
Такой код....

Щас все проверил, ссылка действует только на блок, за пределы не блока не выходит. все нормально

s0rr0w, нарушение конечно, но ведь ссылка то за пределы не выходит

sergiyko · September 29, 2009

В IE - да. Ссылка только на блок.

А вот в файрфоксе такое наблюдается.

Я подозревал, что это как-то через одно место такой подход но ничего другого не смог придумать.

А как такое сделать, не нарушая HTML?

s0rr0w · September 29, 2009

А как такое сделать, не нарушая HTML?

Что именно сделать?

sergiyko · September 29, 2009

Я хотел просто сделать ссылку, немного похожую на кнопку. Обычный прямоугольник определенной ширины и высоты.

s0rr0w · September 30, 2009

Я хотел просто сделать ссылку, немного похожую на кнопку. Обычный прямоугольник определенной ширины и высоты.

a { display: inline-block}

Sign In

Почему сносить центральную колонку?

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information