Четыре фикса в резиновом блоке

Veseloff · September 30, 2010

Сегодня на меня какое-то затупанство напало — никак не могу решить, казалось бы, простейшую задачу. Итак, имеем резиновый блок. В нём надо разместить четыре блока шириной 100 пикселей (в пордке «блок1», «блок2», «блок3», «блок4») таким образом, чтобы блок 1 был прижат к левому краю, блок 4 к правому, а 2 и 3 были на одинаковом расстоянии от них и друг от друга. Уже весь мозг сломал — и таблицами даже делал, нифига не могу придумать.

psywalker · September 30, 2010

Лови решение дружище.

<!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>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 700px;}

	div.left,
	div.right { float: left; background: red; width: 300px;}
	div.right { float: right;}

	div.content { overflow: hidden; background: blue;}
	.l { float: left; width: 50%; background:#3F9;}
	.r { float: right; width: 50%; background: #330;}

</style>

<!--[if IE 6]>
<style type="text/css">

	body {width:expression(document.documentElement.clientWidth < 960 ? "960px" : "auto");}

	div.left { margin-right: -3px;}
	div.right {margin-left: -3px;}

	div.content {zoom: 1;}
</style>
<![endif]-->

</head>

<body>

	<div class="left">LEFT</div>

	<div class="right">RIGHT</div>
	<div class="content">
		<div class="l">Lef</div>
		<div class="r">Rig</div>
	</div>


</body>
</html>

SelenIT · September 30, 2010

Возможно, еще такой подход пригодится (плюс - единообразие стилей блоков, минус - лишний элемент и хаки)...

Veseloff · September 30, 2010

Дичайше всех благодарю, вы спасли мой созг от полного разрушения сегодня

psywalker · September 30, 2010

Дичайше всех благодарю, вы спасли мой созг от полного разрушения сегодня

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

Sign In

Четыре фикса в резиновом блоке

Question

Veseloff

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Veseloff

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information