Резиновый трех колонных макет

deadmeat · October 20, 2008

Здравствуйте, не могу понять как составить трёх колонный макет.

Как на картинке:

html:

</div>

</div>

</div>

</div>

CSS:

#structure { position: relative; width: 80%; height: 100%; left: 10%}

#header {width: 100%; height: 100px}

#l_menu {height: 100%; width: 150px; float: left}

#content {height: 100%; float: left }

#r_menu {height: 100%; width: 150px}

#bottom {width: 100%; height: 50px }

что здесь не так?

надо что б content занимал всё оставшееся место после l_menu и r_menu

Edited October 20, 2008 by deadmeat

DjTarik · October 20, 2008

для левого дива - float: left; width: 150px;

для правого - float: right; width: 150px;

для центрального - margin: 0px 150px;

Вроде так.

deadmeat · October 20, 2008

к сожалению не так..

DjTarik · October 20, 2008

к сожалению не так..

Смотри полный код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css"> 

#structure {
	position: relative;
	width: 80%;
	height: 100%;
	left: 10%;

	border-width: 1px;
	border-style: solid;
	border-color: red;

}

#header {

	height: 100px;
	background-color: green;
}

#l_menu {
	height: 100px;
	width: 150px;
	float: left;
	background-color: blue;
}



#content {
	height: 100px;
	margin: 0px 150px;
	background-color: yellow;



}
#r_menu {
	height: 100px;
	float: right;
	width: 150px;
	background-color: blue;
}

#bottom {
	height: 50px;
	clear: both;
	background-color: gray;
}

</style>

</head>

<body>

<div id="structure">
<div id="header">header</div>
<div id="l_menu">left<br></div>
<div id="r_menu">right<br></div>
<div id="content">center<br></div>
<div id="bottom">bottom</div>

</div>

</body>

</html>

Argus · October 20, 2008

типа того, но только центральный тогда надо в коде перенести после двух боковых

в сообщении #4 верно

вот только лучше для #structure заменить:

position:relative; left:10%;

на:

margin: 0 auto;

height ему, кстати, тоже не поможет.

Edited October 20, 2008 by Argus

deadmeat · October 21, 2008

не могу понять почему r_menu идёт впереди contenta:

<div id="r_menu">right<br></div>

<div id="content">center<br></div>

при коде написанном в сообщении 4 в фаерфоксе всё отображается правильно, а вот в интернет эксплорере content вылезает за правую колонку

Edited October 21, 2008 by deadmeat

DjTarik · October 21, 2008

не могу понять почему r_menu идёт впереди contenta:
<div id="l_menu">left<br></div>
<div id="r_menu">right<br></div>
<div id="content">center<br></div>
при коде написанном в сообщении 4 в фаерфоксе всё отображается правильно, а вот в интернет эксплорере content вылезает за правую колонку

потому что я так всегда верстаю - и не задаю се такой вопрос... =) Так работает - а это главное... Можно ещё попробовать прописать сначала правый див, потом левый, а потом центр... Но центр ТОЧНО должен идти последним, т.к. он будет занимать всю оставшуюся ширину от дивов по 150px...

проверял в: Opera_9.52, Internet Explorer_7, Mozilla Firefox_2. Всё гуд... Про IE6 - не скажу точно...

usb_serg · October 21, 2008

добрый день,

я бы вот тут посмотрел, наверно есть то что вам нужно.

Argus · October 21, 2008

не могу понять почему r_menu идёт впереди contenta:
<div id="l_menu">left<br></div>
<div id="r_menu">right<br></div>
<div id="content">center<br></div>
при коде написанном в сообщении 4 в фаерфоксе всё отображается правильно, а вот в интернет эксплорере content вылезает за правую колонку

контентный блок не имеет float и потому здесь должен идти последним и подбирать под себя 2 предыдущие колонки.

это надо вам попрактиковаться с плавающими блоками, чтобы понять механизм.

сам код из 4 поста не проверял, но если уж есть какая проблема, то можете попробовать увелечить margin от краев, возможно что-то цепляется

Edited October 21, 2008 by Argus

deadmeat · October 21, 2008

благодарю за ответы

Sign In

Резиновый трех колонных макет

Question

deadmeat

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

DjTarik

Link to comment

Share on other sites

deadmeat

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Argus

Link to comment

Share on other sites

deadmeat

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

usb_serg

Link to comment

Share on other sites

Argus

Link to comment

Share on other sites

deadmeat

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information