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

automatix · 20.09.2006, 15:28

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

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

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

Спасибо.

automatix · 20.09.2006, 15:55

Код 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;
}

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

automatix · 20.09.2006, 16:07

Код:

#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;
}

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

baron27 · 21.09.2006, 11:42

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

KidsKilla · 21.09.2006, 14:19

Фегня. На.

Код:

<!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>

webinteger · 29.03.2009, 18:56

Цитата:

Сообщение от KidsKilla

Фегня. На.

Код:

<!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> , то увидим что середина ушла у низ, а бока остались на месте

KidsKilla · 30.03.2009, 20:16

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