Forum Moderators: not2easy
The problem i am having is that i have a main div that is the border for the page inside that i have a couple of divs that form the header then underneath that I have a left div and a content div.
I want the left div to extend to the height of the content div even if it doesn't have enough content.
I have given the body and main a height of 100% to ensure that the left divs 100%height will work.
Here is my css
html {
height: 100%;
}
body {
height: 100%;
margin-bottom: 1px;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
line-height: 120%;
font-size: 11px;
color: #333333;
background: #ffffff;
}
.clr {
clear: both;
}
.outline {
border: 1px solid #cccccc;
background: #ffffff;
padding: 2px;
}
#main {width:800px;
height:100%;
background-color:#FFFFFF;
vertical-align:top;}
#topstrip{
width:800px;
height:10px;
background-color:#999999;
}
#lefttop{
width:200px;
height:90px;
background-color:#35456D;
border: 1px solid #FFFFFF;
border-left:none;
border-top:none;
text-align:center;
float:left;
}
#leftbot{
width:200px;
height:150px;
border: 1px solid #FFFFFF;
border-left:none;
border-top:none;
border-right:none;
float:left;
clear:left;
}
.middle{margin-top:5px;}
#midtop{width:599px;
height:200px;
float:right;
clear:right;
border: 1px solid #FFFFFF;
border-right:none;
border-top:none;
border-left:none;
}
#midbot{
background-color:#999999;
width:599px;
float:right;
height:38px;
border: 3px solid #393939;
border-right:none;
border-bottom:none;
border-left:none;
text-align:center;
}
.welcome{
display:block;
font-size:14px;
color:#000000;
padding-top:5px;
}
#leftbar{
float:left;
clear:left;
width:200px;
background-color:#99C2D6;
height:100%;
padding-top:0px;
}
#content{
margin-top:3px;
width:599px;
height:100%;
}
HTML
<body>
<div align="center">
<div id="main" class="outline">
<div id="topstrip"></div>
<div id="lefttop"><img src="powerboat.jpg" width="200" class="middle" border="0"/>
</div><div id="midtop"><img src="logo.jpg" /></div>
<div id="leftbot"></div>
<div id="midbot"><span class="welcome">Welcome to the home of the</span></div>
<div id="leftbar">
This is the left bar that i want 100%
</div>
<div id="content">
<div class="body_outer">This is main content</div>
</div>
</div>
<br class="clr" />
</div>
</body>
Many thanks in advance
Kiwidesign
Anyway, assuming you've created a 200x1 pixel graphic which is a solid bar of #99C2D6 and called it main_bg,png, your code would look something like:
#main { background: #fff url(main_bg.png) repeat-y left; }Hope this helps - reply back if it doesn't.
Thanks a million worked a treat.
:)
Kiwidesign
