ПОдскажие как сверстать?
Подскажите как сверстать на дивах, три блока, чтобы слева и справа были размером по 200px, а в середине 100% и самое главное, чтобы они были без float-ов, можно ли так сделать?
Без float не очень хорошо. Но можно. Смысл в абсолютных позициях внешнего контейнера и в абсолютных же позициях всех внутренних блоков.
Но что-то мне подсказывает, что всё это повлечёт очень нехорошие последствия.
Может ещё кто чего посоветует, а то я в вёрстке не шибко силён…
Код:
<html>
<head>
<style>
#container, #leftcolumn, #rightcolumn, #centralcolumn{position: absolute; height: 100%;}
#leftcolumn, #rightcolumn{width: 200px; background-color: gray;}
#container {
width: 100%;
top: 0px;
left: 0px;
background-color: #ff8000;
}
#leftcolumn {
left: 0;
right: 0;
}
#rightcolumn {
right: 0;
width: 200px;
}
#centralcolumn{
left: 200px;
right: 200px;
background-color: #ffffdd;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcolumn">
<p>sjdkhfsal jdhflkasj dhflaskjdfh laskjdfh laskjfh </p>
</div>
<div id="rightcolumn">
<p>sjdkhfsal jdhflkasj dhflaskjdfh laskjdfh laskjfh </p>
</div>
<div id="centralcolumn">
<p>sjdkhfsal jdhflkasj dhflaskjdfh laskjdfh laskjfh </p>
</div>
</div>
</body>
</html>
<head>
<style>
#container, #leftcolumn, #rightcolumn, #centralcolumn{position: absolute; height: 100%;}
#leftcolumn, #rightcolumn{width: 200px; background-color: gray;}
#container {
width: 100%;
top: 0px;
left: 0px;
background-color: #ff8000;
}
#leftcolumn {
left: 0;
right: 0;
}
#rightcolumn {
right: 0;
width: 200px;
}
#centralcolumn{
left: 200px;
right: 200px;
background-color: #ffffdd;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcolumn">
<p>sjdkhfsal jdhflkasj dhflaskjdfh laskjdfh laskjfh </p>
</div>
<div id="rightcolumn">
<p>sjdkhfsal jdhflkasj dhflaskjdfh laskjdfh laskjfh </p>
</div>
<div id="centralcolumn">
<p>sjdkhfsal jdhflkasj dhflaskjdfh laskjdfh laskjfh </p>
</div>
</div>
</body>
</html>
Но что-то мне подсказывает, что всё это повлечёт очень нехорошие последствия.
Может ещё кто чего посоветует, а то я в вёрстке не шибко силён…
Вышенаписанное актуально для moz и webkit. Для IE (попробовал в 6, 7 и 8) нужно уточнять #centralcolumn:
position: relative;
margin: 0px 200px 0px 200px;
height: 100%;
position: relative;
margin: 0px 200px 0px 200px;
height: 100%;