Ломаем мозг :)

Игорь Ермаков · May 23, 2009

Вобщем сижу маленечко верстаю, и при вёрстке у меня возникла такая задача: расположить рядом 2 блока, один фиксированной ширины, а второй резиновой.

Я сумел решить эту проблему только используя таблицы.

Интересно найдёт ли кто-нибудь решение с блоками.

Обязательные условия:

Никаких иллюзий и тп, есть масса способов привести результат к такому виду, но задача именно в том, чтобы всё было по честному, никаких z-index'ов и тп. (Кстати на примере, который свёрстан блоками результат достигнут именно через z-index, но этот результат только для примера он не правильный.)

На моём хостиге снова глючит FTP так что залить пример не могу, выкладываю код сюда. Делимся мыслями.

<!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=windows-1251"/>
<style>
html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

/*блоки*/

.left {background:#666;
float:left;
position:absolute;
min-height:100px;
width:379px;
z-index:2;}

.right {background:green;
position:relative;
min-height:100px;
width:100%;
z-index:1;
}

/*Таблицы*/

.table{
width:100%;}

.t1 {background:#666;
width:379px;}

.t2 {background:green;}
</style>
<title>блоки</title>
</head>

<body>

<div id="contaner">
<div class="left"></div>
<div class="right"></div>
<h1>Таблицы</h1>
<table border="1" class="table">
<tr>
<td class="t1">1</td>
<td class="t2">2</td>
</tr>
</table>


</div>
</body>
</html>

psywalker · May 25, 2009

И вообще, зачем эмулировать поведение таблицы, если есть таблица?

+1

Great Rash · May 25, 2009

<!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" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px Arial, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		.bg {
			float: left;
			width: 100%;
			background: #eee;
		}

		.right {
			background: #eee;
			border-left: #666 200px solid;
		}

		.left {
			float: left;
			width: 200px;
			margin-left: -200px;
			background: #666;
		}

		p {
			padding: 5px;
		}
	</style>
</head>

<body>

	<div class="bg">
		<div class="right">
			<div class="left">
				<p>
					text text text text text text<br />
					text text text text text text<br />
					text text text text text text<br />
					text text text text text text<br />
					text text text text text text<br />
				</p>
			</div>
			<p>
				text text text text text text<br />
				text text text text text text<br />
				text text text text text text<br />
				text text text text text text<br />
			</p>
		</div>
	</div>

</body>
</html>

Проверял только в Мозилле и ИЕ7. По идее должно работать везде.

Edited May 25, 2009 by Great Rash

Zippovich · May 25, 2009

http://blog.html.it/layoutgala/LayoutGala24.html

Sign In

Ломаем мозг :)

Question

Игорь Ермаков

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Zippovich

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information