PDA

View Full Version : Help With Css Layout


blimp
03-24-2010, 01:12 PM
I'd like to create the following div layout,

HEADER = To always be positioned at the top of the page
BODY = To resize depending on the position of the footer
FOOTER = To always sit at the bottom of the page

So far I've attempted this:


body {
margin: 0px;
}
#header {
background-color: #000;
height: 150px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#body {
height: 300px;
width: 800px;
background-color: #CCC;
margin-right: auto;
margin-left: auto;
}
#footer {
height: 150px;
width: 800px;
background-color: #F00;
margin-right: auto;
margin-left: auto;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</body>
</html>


My header is fine and I've gotten the footer to sit at the bottom of the page, but for some reason have lost my middle positing, and the part I don't know how to is to make the body div resize appropriately?

Corrosive
03-24-2010, 02:22 PM
take the height out of #body and take the absolute positioning out of the footer and all should be well.

gentleone
03-24-2010, 06:52 PM
To get a footer stick to the bottom of the page no matter the sreensize... there's more to it.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Corrosive
03-24-2010, 07:02 PM
FOOTER = To always sit at the bottom of the page


:oops: sorry, didn't read that.

blimp
03-25-2010, 01:37 AM
How do I make the grey <div> fill the whole screen vertically

I've tried adding height: 100% but that didn't work.

I've set the height to 500px for now....

<div style="display: table; height: 500px; width: 100%; background: #aaa; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"><p style=" _position: relative; _top: -50%" >PLACE IMAGE OR TEXT HERE.......</p></div>
</div>


<div style="display: table; height: 500px; width: 100%; background: #aaa; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"><p style=" _position: relative; _top: -50%" >PLACE IMAGE OR TEXT HERE.......</p></div>
</div>

gentleone
03-25-2010, 08:18 AM
I've tried adding height: 100% but that didn't work.If you set a 100% height than it's set to a 100% height from something where the div is place it.
For example if your 100% height #body div is placed inside a div that is 500px height, than the 100% height is equal to that 500px height. If you set a height of 50% than the height will be 250px, 25% height will be 125px and so on.

In your case that 100% height #body div is placed in the body of the page and there is no height set to the body, so that's why it doesn't do anything.

Try adding the following to your css:

html, body {height: 100%}
and lets see what happens.

Another thing if I look to your div structure, are you trying to achieve a div that's horizontal and vertical placed in the middle of the screen?

blimp
03-29-2010, 11:28 AM
Absolutely brilliant gentleone..... Thank you

gentleone
03-30-2010, 05:01 PM
Great! You're welcome! ;)