Форум Flasher.ru - блочный дизайн, три колонки, 3 columns, DIV-Layout, Div-Design

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

блочный дизайн, три колонки, 3 columns, DIV-Layout, Div-Design

Люди, выручайте, горю!!!

Заклинило, не могу решить простую проблему. Нужно сделать трехколоночный блочный дизайн с фиксированной шириной средней колонки и равными между собой по ширине "резиновыми" боковыми.

Прошу помочь.

Спасибо.

Код HTML:

<div id="main">

        <div id="left"></div>

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

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

</div>

Код:

*

{/*

    scrollbar-face-color: #EEEAEB;

    scrollbar-highlight-color: #834627;

    scrollbar-shadow-color: #834627;

    scrollbar-3dlight-color: #EEEAEB;

    scrollbar-arrow-color: #834627;

    scrollbar-track-color: #EEEAEB;

    scrollbar-darkshadow-color: #EEEAEB;

    

    border:0px 0px 0px 0px;

    

    box-sizing: border-box; -moz-box-sizing: border-box;*/

}

BODY

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

    overflow-x: hidden;

    overflow-y: hidden;

    

    background-color:#FFFFFF;

}



#main

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

    width:100%;

    height:100%;

    

    z-index:0;

    

    background-color:#FFFFFF;

    

    text-align:center;

}



#left

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

    height:100%;

    

    width:auto;

    background-color:#FF0000;

    

    float:right;

}



#center

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

    width:768px;

    height:100%;

    

    background-color:#00FF00;

    

    float:right;

}



#right

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

    height:100%;

    

    width:auto;

    background-color:#0000FF;

    

    float:none;

}

Вот мой код... Как я уже флоаты ни ставил -- нифига...

Код:

#left

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

    height:100%;

    

        width:auto;

    background-color:#FF0000;

    

    float:left;

}



#center

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

        width:768px;

    height:100%;

    

    background-color:#00FF00;

    

    float:left;

}



#right

{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

    

    height:100%;

    

        width:;

    background-color:#0000FF;

    

    float:right;

}

Вот. Уже лучше, но все равно не то, что надо.

по-моему, не так уж это и тривиально.
http://www.alistapart.com/articles/holygrail/ - типа того, но наоборот.
http://xhtml.ru/instr/3col_creator/ - генератор шаблонов (на всяк. случай)

Фегня. На.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

        <title>Untitled</title>

<style type="text/css">

#left{float:left;width:50%;margin-right:-150px;}

#left .indent{margin-right:160px;border:1px solid #000;background:#ccc;padding:1em;}

#right{float:right;width:50%;_width:49.9%;margin-left:-150px;}

#right .indent{margin-left:160px;border:1px solid #000;background:#ccc;padding:1em;}

#center{float:left;width:300px;}

#center .indent{border:1px solid #000;background:#ccc;padding:1em;}

</style>

</head>

<body><script type="text/javascript"></script>

<div id="main">

<div id="left"><div class="indent">left</div></div>  

<div id="center"><div class="indent">center</div></div>  

<div id="right"><div class="indent">right</div> 

</div>

</body>

</html>

Цитата:

Сообщение от KidsKilla (Сообщение 571056)

Фегня. На.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

        <title>Untitled</title>

<style type="text/css">

#left{float:left;width:50%;margin-right:-150px;}

#left .indent{margin-right:160px;border:1px solid #000;background:#ccc;padding:1em;}

#right{float:right;width:50%;_width:49.9%;margin-left:-150px;}

#right .indent{margin-left:160px;border:1px solid #000;background:#ccc;padding:1em;}

#center{float:left;width:300px;}

#center .indent{border:1px solid #000;background:#ccc;padding:1em;}

</style>

</head>

<body><script type="text/javascript"></script>

<div id="main">

<div id="left"><div class="indent">left</div></div>  

<div id="center"><div class="indent">center</div></div>  

<div id="right"><div class="indent">right</div> 

</div>

</body>

</html>

Подскажите пожалуйста что поправить чтоб высота id="left" и id="right" = id="center", например если задать
<div id="center">
<div class="indent">center<br>center<br>center<br>center<br>center<br>center<br>center<br>center<br>
</div></div> , то увидим что середина ушла у низ, а бока остались на месте :confused:

JavaScript. К большому сожалению всё что относится к вертикальному позиционированию в ксс либо невозможно либо достигается неимоверными хаками.