div height problem

[arbitter]

Basically I would like a page consisting of two columns. One with a fixed width on the left, ALWAYS being exact 100% of the page (or more, if the right div extends this height), and a right div, also ALWAYS being at least 100% unless ofcourse the content is longer.

 

Currently the divs are always a little larger than the 100%, due to some padding and margin, is there a way to change this without adding another div?

Here's my code:

#left{
width: 200px;
height:100%;
float:left;
padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;
background-color:white;
}
#right{
height:100%;
min-height:100%;
position:absolute;
left:240px;
margin-top:10px;
margin-right:10px;
background-color:white;
padding: 10px;
min-height:600px;
}

[Proletarian]

I'm not sure what your question is exactly, to be honest.

 

If the height is 100%, then the height is 100% relative to the viewport size, plus margin, padding, and border values. That being said, I don't think you need to have "min-height:100%" if you have "height:100%".

 

If you want the height to be a certain constant, then just remove the height values on the padding and margin properties (i.e., padding: 0, 1em, 0, 1em).

 

I hope this helps.

[arbitter]

Oh my, removing the heights does indeed make the div stretch along with it's content!

I removed both div heights and now the left one is smaller but I like it like that!

 

Only have a minor issue that the right div has a bottom-margin of 10px, but it doesn't show that, it just sticks to the end of the content!