Beginner question about CSS and layout and height

Posted by vtortola on Stack Overflow See other posts from Stack Overflow or by vtortola
Published on 2010-05-20T23:27:14Z Indexed on 2010/05/20 23:30 UTC
Read the original article Hit count: 421

Filed under:
|
|
|
|

Hi,

I'm trying to create a very simple page that contains a container, a header, a left column and a footer:

[containter]
[header /]
[content /]
[leftBar /]
[footer /]
[/containter]

(Sorry, I cannot paste the code properly, only appears the tag "body" and the rest disapears :S ... )

As you can see, very simple stuff. I want to use the 100% of the height, as I can do with the width, but I simply don`t get it work :S At his moment I'm using min-height, but how could I use the height:100% ? What I like is that the footer is always visible, and you scroll the content.

This is what I have till the moment:

body

{ font-family: Verdana; font-size: 0.8em; background-color:#f1f1f1; }

container {

border:solid 2px Black; position:absolute; left:10%; width:80%; margin:auto; }

header {

height:20px; background: #DDDDDD; }

leftBar {

width: 20%; background: #669966; min-height:600px; postion:absolute; top:20px; bottom:20px; }

content {

float:right; background-color: #cdcde6; position:absolute; left:20%; right:0px; bottom:20px; top:20px; padding:5px; }

footer {

position:absolute; height:20px; }

I'm reading a book about CSS, but I still don't get the part about the height :S

Thanks in advance.

© Stack Overflow or respective owner

Related posts about html

Related posts about css