|
3 колонки % px %
Здравствуйте!
Подскажет, пожалуйста, как можно получить такую резиновую верстку: 3 колонки % px %. Примерный эквивалент <table width="100%"><tr><td width="50%">ляля</td><td width=100><td width="50%">ляля</td></tr></table> например так не работает, поскольку left-block и right-block блоки набегают на central-block-const при масштабировании браузера body {
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
}
#main {
border: 1px solid #f00;
width:100;
padding:0px;
margin:0px;
position:relative;
overflow:hidden;
}
#central-block-const {
border: 1px solid #ff0;
width:100px;
margin: 0px auto;
}
#left-block {
border: 1px solid #ff0;
width: 40%;
position:absolute;
top:0px;
left:0px;
margin:0px;
padding: 5px;
}
#right-block {
border: 1px solid #ff0;
width: 40%;
position:absolute;
top:0px;
right:0px;
margin:0px;
padding: 5px;
}
<div id="main">
<div id = "central-block-const"><BR><BR><BR><BR><BR>
<BR></div>
<div id="left-block">
left blockleft blockleft blockleft blockleft blockleft block
</div>
<div id="right-block">
left blockleft blockleft blockleft blockleft blockleft block
</div>
</div>
Спасибо! |
40% + 40% + 100px будет равно 100% только если вся ширина 500px. При любой другой ширине поведение будет непредсказуемое.
|
но ведь как то можно сделать дивами такое
Примерный эквивалент <table width="100%"><tr><td width="50%">ляля</td><td width=100><td width="50%">ляля</td></tr></table> |
Цитата:
|
Либо просто 100px в центре, а остальное (лево и право) просто "пополам" от оставшегося...
|
Будет 40% + 100px + все_остальное.
может получиться, я понял, ksa - спасибо)! |
еще вопрос, немного не в тему). по какому принципу задавать имена селекторам. можно конечно как угодно, но наверняка есть какой - то принцип, хочется сразу научиться правильно
|
Элементарно:
<!DOCTYPE HTML>
<html>
<body>
<style>
.left{
float:left;
width:50%;
height:100%;
margin-left:-50px;
background-color: #fcc;
}
.right{
float:right;
margin-right:-50px;
width:50%;
height:100%;
background-color: #ccf;
}
.fixer{
margin:0 50px;
height:100%;
background-color: #cfc;
}
.main{
height:200px;
}
</style>
<div class="main">
<div class="fixer">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</div>
</body>
</html>
|
Цитата:
|
Здорово! все спасибо!
|
| Часовой пояс GMT +3, время: 05:39. |
|