Cześć,
mam problem z ustawieniem prawej kolumny. Chodzi mi o to, żeby wysokość div-a "content" była rozciągana do wysokości div-a "panels", jeśli "content" będzie niższy od tego drugiego. Poniżej fragmenty CSS-a i HTML-a:
mam problem z ustawieniem prawej kolumny. Chodzi mi o to, żeby wysokość div-a "content" była rozciągana do wysokości div-a "panels", jeśli "content" będzie niższy od tego drugiego. Poniżej fragmenty CSS-a i HTML-a:
Kod:
<div id="page">
<div id="header">
<div id="logo"></div>
<div id="menu">
</div>
</div>
<div id="main">
<div id="main_line"></div>
<div id="main_corner"></div>
<div id="collumns">
<div id="panels">
<div id="panel"></div>
<div id="panel_bricks_big"></div>
<div id="panel"></div>
<div id="panel_bricks_small"></div>
</div>
<div id="content">
<!-- tu będzie div z tekstem -->
<div id="content_bricks"></div>
<div id="content_line"></div>
</div>
</div>
</div>
<div id="footer_top">
<div id="footer_height"></div>
<div id="footer_text">
</div>
<div id="copyright"></div>
</div>
<div id="footer_bottom"></div>
</div>Kod:
html, body {
background: rgb(50,50,50) url(png/tlo.png) repeat;
color: #000;
margin: auto;
padding: 0;
color: black;
font: 15px Verdana, Helvetica, sans-serif;
}
#page{
position: static;
margin: 0 auto;
padding: 0;
clear: none;
width: 900px;
background: transparent;
}
/* START HEADER */
#header{
position: static;
margin: 0;
padding: 0;
clear: none;
width: 900px;
height: 255px;
background: transparent url(png/naglowek.png) no-repeat;
}
#logo{
/*position: relative;
top: 105px;
left: 30px;**/
position: absolute;
padding: 0;
margin: 105px 0 0 30px;
width: 459px;
height: 84px;
background: transparent url(png/logo.png) no-repeat;
}
#menu{
position: absolute;
margin: 231px 0 0 0;
padding: 0;
height: 26px;/*24+2*/
}
/* END HEADER */
/* START MAIN */
#main{
position: static;
margin: 0;
padding: 22px 12px 7px 4px;
clear: both;
float: left;
width: 884px;
/*height: auto;*/
background: rgb(39,39,39) url(png/main_fade.png) repeat-x top;
}
#main_line{
position: static;
margin: -22px 0 0 -4px;
padding: 0;
clear: left;
float: left;
width: 852px;
height: 2px;
background: rgb(39,39,39) url(png/main_line.png) no-repeat top;
}
#main_corner{
position: static;
margin: -22px -12px 0 0;
padding: 0;
clear: right;
float: right;
width: 48px;
height: 48px;
background: rgb(39,39,39) url(png/main_corner.png) no-repeat top;
}
/* END MAIN */
/* START COLLUMNS */
#collumns{
position: static;
margin: -26px 0 0 0;
padding: 0;
clear: none;
float: left;
width: 884px;
/*height: auto;*/
background: transparent;
}
/* END COLLUMNS */
/* START PANEL */
#panels{
position: static;
margin: 0 4px 0 0;
padding: 0;
clear: left;
float: left;
width: 180px;
/*height: auto;*/
}
#panel{
/*position: static;*/
margin: 0;
/*padding: 0;*/
clear: both;
/* float: left;
width: 180px;
height: auto;*/
min-height: 30px;
background: rgb(23,23,23) url(png/panel_corner.png) no-repeat top right;
}
#panel_bricks_big{
/*position: static;*/
margin: 0;
/*padding: 0;*/
clear: both;
/*float: left;*/
width: 35px;
height: 35px;
background: rgb(39,39,39) url(png/panel_bricks_big.png) no-repeat left;
}
#panel_bricks_small{
/*position: static;*/
margin: 0;
/*padding: 0;*/
clear: both;
/*float: left;*/
width: 35px;
height: 21px;
background: rgb(39,39,39) url(png/panel_bricks_small.png) no-repeat left;
}
/* END PANEL */
/* START CONTENT */
#content{
position: static;
margin: 0 0 0 8px;
padding: 0;
clear: none;
float: right;
width: 692px;
/*height: auto;*/
min-height: 48px;
background: rgb(23,23,23) url(png/matter_corner.png) no-repeat right top;
}
#content_bricks{
position: static;
margin: 13px 0 0 0;
padding: 0;
clear: left;
float: left;
width: 35px;
height: 35px;
background: rgb(23,23,23) url(png/matter_bricks.png) no-repeat left bottom;
}
#content_line{
position: static;
margin: 0;
padding: 0;
clear: both;
float: left;
width: 692px;
height: 2px;
background: rgb(23,23,23) url(png/matter_line.png) no-repeat left;
}
/* END CONTENT */
/* START FOOTER */
#footer_top{
position: static;
margin: 2px 0 0 0;
padding: 0;
clear: both;
float: left;
width: 900px;
height: auto;
background: rgb(39,39,39) url(png/stopka_klocki_g.png) no-repeat left bottom;
}
#footer_height{
position: static;
margin: 0;
padding: 0;
clear: right;
float: right;
width: 12px;
height: 37px;
background: transparent;
}
#footer_text{
position: static;
margin: 0;
padding: 0;
clear: left;
float: left;
background: transparent;
}
#footer_bottom{
position: static;
margin: 0 0 20px 0;
padding: 0;
clear: both;
float: left;
width: 888px;
height: 12px;
background: rgb(39,39,39) url(png/stopka_klocki_d.png) no-repeat left bottom;
}
/* END FOOTER */
/* START COPYRIGHT */
#copyright{
position: static;
margin: auto 0 0 0;
float: right;
min-height: 21px;
}
/* END COPYRIGHT */
