...

View Full Version : CSS Help needed.



T.K.
01-07-2008, 12:34 PM
Hopely this content goes to right place. I have to ask someone to help me with a small problem I have with one of my website.

I have a content element (named as body) that contains a right aligned div, so the body element itself is separated in two parts. I have set the height of these two elements to 100% as default and these are positioned as relative.

Now, the problem is how do I get the both elements to automatically extend together (like tables do) if I add content more than the 100% of height into another of these parts?

When having more content than the default 100% of the body element height, this will happen:
http://listat.verkkoansiot.net/overflow.png

And when editing the code by replacing the height property of the body div from height:100%; to min-height:100%; the problem with the height is solved but the right aligned div does this:
http://listat.verkkoansiot.net/screenshot_min-height.png

For clearance, I will add the default CSS code here:




body,html {
margin:0;
padding:0;
background:#C73F17;
height:100%;
}

#body {
margin:auto;
height:100%;
width:90%;
border-left:solid #000 1px;
border-right:solid #FFB00F 1px;
background:#FFFFCC;
}

#header {
height:70px;
border-bottom:solid #000 2px;
text-align:center;
background:#1c1c1c;
}

#footer {
height:25px;
border-top:solid #1c1c1c 1px;
background:#000;
}

#right {
float:right;
width:150px;
height:100%;
border-right:solid #FFF 1px;
background:#1c1c1c;
}

#nav {
height:20px;
border-bottom:solid #000 2px;
background:#282828;
}


I hope that there's a proper solution for this, without needing to create an oveflow property to produce a side bar.

jcdevelopment
01-07-2008, 02:41 PM
Have you tried, instead of 100% height, try defining it with auto, or inherit? To me the 100% attribute has never been user friendly to me. Im not sure if it will work, but it cant hurt..

T.K.
01-07-2008, 03:45 PM
Well, I tried to define the elements using auto and inherit properties, but didn't get it work. Thanks for the tip, though.

rmedek
01-07-2008, 04:02 PM
An easier method would be to use the faux columns (http://www.alistapart.com/articles/fauxcolumns/) approach. It uses background images to give the appearance of vertically stretching, equal length columns.

T.K.
01-08-2008, 12:53 PM
An easier method would be to use the faux columns approach. It uses background images to give the appearance of vertically stretching, equal length columns.

I just might do that, thanks for an advice.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum