CSS+Div Prolbem

[Matthias Göbels]

Hi There,

I have a problem with an xhtml/css layout.

I habe 3 divs:

1) Header (height: 20px)
2) Content(height: ...) *
3) Footer (height: 20px)

The three div's are among each other. The content div should fill the
page so that the footer is always at the bottom of the page.

I tried this one here: http://clients.frixxx.de/xhtml/test01.html

This is kinda right but the scrolling should'nt be if the text is as
short as in this content div.

Maybe someone can help.

Sorry for my bad english.

cU M.Göbels

[wayne]

Matthias Göbels wrote:

Hi There,

I have a problem with an xhtml/css layout.

I habe 3 divs:

1) Header (height: 20px)
2) Content(height: ...) *
3) Footer (height: 20px)

The three div's are among each other. The content div should fill the
page so that the footer is always at the bottom of the page.

I tried this one here: http://clients.frixxx.de/xhtml/test01.html

This is kinda right but the scrolling should'nt be if the text is as
short as in this content div.

Maybe someone can help.

Sorry for my bad english.

cU M.Göbels

First, you don't need the body height, margin, or border entries. Ditto
for the html, body entries.

If you want the header and footer divs to be a fixed amount, then use
height: for those. Remove the content div height: entry and then the
content area will grow or shrink with the amount of information in it.

I use the body section for global text attributes and background color
other than the div colors. If the divs fill the entire area, the body
background will not be visible

body {

}

#header {
background:#f00;
height: 20px;
margin: 0;
padding: 0;
}

#content {
background:#0f0;
margin:0;
padding:0;
}

body>#content{height:auto;}

#footer {
background:#00f;
height: 20px;
margin: 0;
padding: 0;
}

Wayne

[Matthias Göbels]

wayne wrote:

First, you don't need the body height, margin, or border entries. Ditto for the html, body entries.

If you want the header and footer divs to be a fixed amount, then use
height: for those. Remove the content div height: entry and then the
content area will grow or shrink with the amount of information in it.

I use the body section for global text attributes and background color
other than the div colors. If the divs fill the entire area, the body
background will not be visible

body {

}

#header {
background:#f00;
height: 20px;
margin: 0;
padding: 0;
}

#content {
background:#0f0;
margin:0;
padding:0;
}

body>#content{height:auto;}

#footer {
background:#00f;
height: 20px;
margin: 0;
padding: 0;
}

Wayne

Hi,

But if i write just about 2 words then the footer is not at the bottom
aof the window.

The footer should be at the bottom of the window if there are some words
and if there are very much words it should be the end of the page.

M.Göbels