3 colls tableless CSS layout

setty

setty

Граф
Собственно проблема состоит в том чтоб создать разметку о трех колонках. Высота всех колонок должна быть одинакова и должна зависеть от контента. Т.е. высота равна высоте колонки с наибольшим контентом. Ширина колонок должна составлять 1/3 от родительского блока и не должна быть задана абсолютными единицами (эдакая резиновость). Между колонками хотелось бы видеть отступы что осложняет задачу деления странциы на три колонки поскольку отступы задаются в абсолютных величинах, ширина же колонок должна указываться в относительных. Оговорюсь сразу, решить проблему требуется исключительно средствами xhtml/css, использование JS в данном (моем)
случае исключено.

Мои попытки решить проблему не дали желаемого результата. Во первых разделить страницу ровно на три части не очень то и получается. Мне удалось решить проблему только для ФФ, указав в качестве отступа между колонками 0.5em. Видимо это не правильно и мне не совсем понятно почему это работает ведь em это единицы для шрифта. Впрочем тут допустимо чтоб центральная колонка была чуть меньше/больше боковых.
Настоящая проблема в том как сделать так чтоб все колонки были одинаковой длины и чтоб она зависела от контента.
На картинке то что получилось у меня.
You must be registered for see images

вот код.
HTML: 
<div class="examples">
	<div class="browser_view">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	</div>
	<div class="html_view">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<div class="css_view">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
</div>
вот css
HTML: 
.examples
{	overflow: 		auto;
	background-color:	#823809;
}
.browser_view, .html_view, .css_view
{	float:			left;
	background-color:	#786867;
	color:			#fff;
	width:			32%;
	height:			100%;
}
.html_view
{	width:			34%;
	margin-left:		.5em;
	margin-right:		.5em;
}
Я перепробовал уже много вариантов, включая абсолютное позиционирование, height:100% и bottom:0. Желательно услышать решение проблемы, а не догадки и мысли в слух.
 

Вкладення

Feuer

Feuer

root@ded-desktop:~#
Модератор
а как насчет
HTML: 
width: нужная ширина для каждой рамки
 
Sacram

Sacram

Everybody lies
Как вариант попробуйте такой способ:
HTML: 
<html>
<head>
<style>
html,body {
	padding: 0px;
	margin: 0px;
}
.mainContainer {
	border: 1px solid red; 
	overflow: hidden;
}
.separator {
	float: left; 
	width: 1%;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	background: brown;
}
.sideDiv {
	float: left; 
	width:32%; 
	padding-bottom: 32767px;
	margin-bottom: -32767px;
}
.centerDiv {
	float: left; 
	width:34%; 
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	background: red;
}
.green {
	background: green;
}
.blue {
	background: blue;
}
</style>
</head>
<body>
<div class="mainContainer">
	<div class="sideDiv green">1<br/><br/><br/><br/><br/><br/><br/><br/></div>
	<div class="separator">&nbsp;</div>
	<div class="centerDiv">2</div>
	<div class="separator">&nbsp;</div>
	<div class="sideDiv blue">3</div>
</div>
</body>
</html>
 
setty

setty

Граф
2Sacram , да, кажется то что нужно, спасибо, попробую.
 
Ви повинні увійти або зареєструватися, щоб відповісти.
Зверху