Problem with positioning and width

[Melee]

Hello,

I wasn't able to find any solution to this problem, so I decided to create a new topic.

First of all I wanted to make my content 100% height so it fills the remaining space on your browser, but when I do so it only becomes about 240px in height.

The second thing is, inside the content I want to have 4 divs for text. I want 3 of them to be next to each other horizontally, and the fourth one to be on the bottom stretching from side to side (left to right).

Now, I've been trying, and searching on the internet, but I can't find anything. I've tried columns, positioning, but it won't work, or it messes up.

My css:

#content{
width: 100%;
height: 100%;
background-color: #FFF;
font-size: 12px;
color: #333;
overflow: visible;
}

#subcontent1{
position: relative;
top: 10px; left: 10px;
background-color: #FFF;
width: 200px;
height: 200px;
padding: 3px;
-webkit-border-top: 1px;
-moz-border-bottom: 1px;
border-bottom: 1px dotted #999;
border-top: 1px dotted #999;
}

#subcontent2{
background-color: #FFF;
width: 200px;
height: 200px;
padding: 3px;
-webkit-border-top: 1px;
-moz-border-bottom: 1px;
border-bottom: 1px dotted #999;
border-top: 1px dotted #999;
padding: 10px;
}

#subcontent3{
background-color: #FFF;
width: 200px;
height: 200px;
padding: 3px;
-webkit-border-top: 1px;
-moz-border-bottom: 1px;
border-bottom: 1px dotted #999;
border-top: 1px dotted #999;
padding: 10px;
}

#subcontent4{
background-color: #FFF;
width: 200px;
height: 200px;
padding: 3px;
-webkit-border-top: 1px;
-moz-border-bottom: 1px;
border-bottom: 1px dotted #999;
border-top: 1px dotted #999;
padding: 10px;
}

[swa66]

Height: 100% gives an element the height of the direct parent *if* the parent has an explicitly set height that's different from "auto". The only exception is the root element that has the height of the viewport.

So, to get something to have the height of the viewport, you need to set the height of html, body, and any element in between it to height:100% .

Remember that you set the height of the content of the element, so if it has any padding, or border it will make the overall height of the element taller than the viewport.

Do yourself a favor and don't touch it in IE till you have it working properly in standards compliant browsers, IE will set you on the wrong foot at every turn.

[Melee]

Thanks, I'll see if it works. And I never use IE anyway.

Edit: when I change all the divs to height: 100%;, my navigation bar is gon.

[edited by: Melee at 11:12 am (utc) on Mar. 15, 2009]