три колонки - средняя жесткая, боковые тянутся

Колос · November 11, 2008

Помогите сверстать или дайте ссылку, чего-то не могу найти нигде такого.

Шапка и подвал не нужны. Просто три колонки. Средняя по середине - она неизменной ширины. Боковые тянутся, чтобы заполнить всю страницу.

Пробую так:

<!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">
	<style>
	#pred
	{
	  float:left;
	  background-color:#0000FF;  
	  width:50%;
	  text-align:right;
	  position:relative;
	  z-index:1;
	}
	#sled
	{
	  float:right;
	  background-color:#00FF00;  
	  width:50%;
	  text-align:left;
	  position:relative;
	  z-index:1;
	}
	#h1
	{
	  width:200px;
	  background-color:#FF0000;
	  margin-left:auto;
	  margin-right:auto;
	  position:relative;
	  z-index:2;
	}
	</style>
  </head>
  <body>  
	  <div id="pred"><p style="margin-right:100px;">Предыдущий</p></div>
	  <div id="sled"><p style="margin-left:100px;">Следующий</p></div>
	  <div id="h1">Название</div>
	  <div style="clear:both;"></div>
  </body>
</html>

Однако:

1.средняя колонка почему-то растягивается по ширине

2.В ИЕ z-index почему-то не воспринимается

klierik · November 11, 2008

проще сделать такое таблицой

Колос · November 11, 2008

Вот всегда, как задашь вопрос, то сразу получится:

<!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">
	<style>
	#pred
	{
	  float:left;
	  background-color:#0000FF;  
	  width:50%;
	  height:40px;
	  text-align:right;
	  position:relative;
	  margin-top:-40px;
	  z-index:1;
	}
	#sled
	{
	  float:right;
	  background-color:#00FF00;  
	  width:50%;
	  height:40px;
	  text-align:left;
	  position:relative;
	  margin-top:-40px;
	  z-index:1;
	}
	#h1
	{
	  width:200px;
	  height:40px;
	  background-color:#FF0000;
	  margin-left:auto;
	  margin-right:auto;
	  position:relative;
	  z-index:2;
	}
	</style>
  </head>
  <body>  
	  <div id="h1"><p style="vertical-align:top;">Название</p></div>
	  <div id="pred"><p style="margin-right:100px;">Предыдущий</p></div>
	  <div id="sled"><p style="margin-left:100px;">Следующий</p></div>
	  <p align="center" style="margin:0px">aaaaa</p>
  </body>
</html>

Searcher · November 11, 2008

еще вариант:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<style type="text/css"> 

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	}

#leftSect {
	position:absolute;
	width:50%;
	background:#fdd;
	}

#rightSect {
	position:absolute;
	right:0;
	width: 50%;
	background:#ddf;
	}

#leftCol {
	margin-right: 100px;
	background:#faa;
	}

#rightCol {
	margin-left: 100px;
	background:#aaf;
	}

#centerCol {
	position:absolute;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	background:#afa; 
	}


</style>
</head>
<body>


<div id="Content">

	<div id="leftSect">
		<div id="leftCol">Левая колонка</div>
	</div>
	<div id="rightSect">
		<div id="rightCol">Правая колонка</div>
	</div>
	<div id="centerCol">Центральная колонка</div>

</div>


</body>
</html>

rigl · July 7, 2009

еще вариант:

Как побороть то, что правая колонка при (не)четном разрешении (ie, opera) наскакивает на центральную в 1px.

Знаю как сделать таблицей, а вот дивами? (Без js конечно)

Edited July 7, 2009 by rigl

Justnewone · July 8, 2009

Как побороть то, что правая колонка при (не)четном разрешении (ie, opera) наскакивает на центральную в 1px.
Знаю как сделать таблицей, а вот дивами? (Без js конечно)

Никак

dyadya · July 8, 2009

Как побороть то, что правая колонка при (не)четном разрешении (ie, opera) наскакивает на центральную в 1px.

Кривой вариант: делать 99%, оставшийся процент прятать в бэкграунд.

Sign In

три колонки - средняя жесткая, боковые тянутся

Question

Колос

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

rigl

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

dyadya

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information