Ok so...I'm making my site, and this is the first all CSS one I'm making. What I need is for the content to stretch to fit the height of the viewport of the browser. I have that working, but it only works for one div at a time. If I try to set more than to fit the screen, only the outermost div does...and it's a bit of an issue for my layout, any ideas?
CSS:
html, body { height:100%; margin:0; font:12px Tahoma; color:#DDEEFF; background:url(backdrop.png) 50% 0 no-repeat fixed black; }
#borders { width:832px; min-height:100%; margin:0 auto; vertical-align:bottom; background: url(borders.png); }
#background { width:800px; min-height:100%; margin:0 auto; background:url(background.png); }
#header { width:800px; height:160px; margin:0 auto; background:url(top.png); }
#content { width:800px; height:auto; margin:0 auto; padding:0px 0px; background:url(background.png) }
#footer { width: 800px; vertical-align:bottom; height:24px; margin:0 auto; background:url(footer.png); }
#left { width: 200px; float:left; }
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
<body>
<div id="borders">
<div id="background">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Thanks, sharf
None.
Percentages of are based on the parent object, so if you tell a div to be 50% of the page and one inside it to be 50%, the inside one will actually be 25% of the page. Instead of using the min-height, use a percent, for one, that isn't accepted in IE, secondly, a min-height of 100% will glitch up I think.
None.
Yeah I know, I told the page to be 100%, and I told the first dive to be 100%, that works...the problem is the second div inside of it when it's set to 100% it sets to 100% of the content...
None.
Instead of doing min-height:100%, do height:100%, what browser are you testing this in, btw?
None.
1) Don't use min-height at all for block-level elements.
2) Position: Absolute; if you don't want them to be dependent on each other.
None.
Both IE8 and FF3. What I want is #borders and #background to be 100% of the browsers view, unless you need to scroll, in which case I want it to expand to fit the content (why I used min-height) which works perfectly, but only for the borders (or the background if I remove the borders) and then the Footer to be at the very bottom of the page...so far I can only get #borders to be the full length of the page, and I cannot get #background to fit, nor can I get the footer to be at the bottom.
None.
Did you try the Position: Absolute like Syphon said?
None.
No, where would I put it?
None.
It's just another attribute, add it to the general div class
None.
yeah ok I did it...and it seems to work, problem though is now it's left justified instead of centered...
None.
Show most recent css + html?
None.
yeah ok I did it...and it seems to work, problem though is now it's left justified instead of centered...
Left: 50%;
Margin-left: -*half of elements x-size*
Goes in all of the absolutely positioned DIV ids in the CSS now. You can remove the 'auto' property from the left-right margin, as auto doesn't work on positioned elements.
None.
that doesn't exactly work....cause now it's right justified...?
None.
Make sure you type the - before the half of the elements size. It's a negative margin.
Also, right
aligned, not justified. You clearly do not know what the term "justified" means in typesetting.
None.
scratch that...it doesn't work...well yes it is centered...the content only stretches to be 100% of the screen, but still does not stretch beyond the view when there is more content than can fit on the page...I also can't get the content div to stay within the confines of the borders..I want that to be centered just like the rest of it...but for some reason it wont? and lastly I want the footer to be centered, at the very bottom of the background/border divs, so they will be at the very end of all the divs.
here:
CSS:
/* CSS Document */
html, body { height:100%; margin:0; font:12px Tahoma; color:#DDEEFF; background:url(backdrop.png) 50% 0 no-repeat fixed black; }
#borders { position:absolute; width:832px; left:50%; margin-left:-416px; height:100%; background: url(borders.png); }
#background { position:absolute; width:800px; left:50%; margin-left:-400px; height:100%; background:url(background.png); }
#header { position:absolute; width:800px; left:50%; margin-left:-400px; height:160px; background:url(top.png); }
#content {position:absoulte; width:800px; left:50%; margin-left:-400px; height:100%; padding:10px 10px; }
#footer { position:absoulte; width:800px; left:50%; margin-left:-400px; height: 24px; background:url(footer.png); }
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
<body>
<div id="borders">
<div id="background">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Note that I am aware there is nothing there to align anything to the bottom or to make the content to be a certain size. However the content and footer divs do not lign up, they are left aligned....and I don't know why.
thanks, sharf
Post has been edited 2 time(s), last time on Nov 27 2009, 4:36 am by sharf.
None.
You can't have an element both stretch to full height when there's less than a full screen, and go over when there's more. Sorry.
The only thing I could suggest trying is putting a dummy <span> in between content and in the main body, and footer, and having it take on a height of 100%; However, then when you have more than a full page, there'll still be a huge gap. To get it to work both ways, you'll need to invoke client side scripting.
None.
Well than I'll have to stick with good old fashioned tables, seeing as how they can do things CSS cannot. It has a minor bug in IE7 I'm trying to fix right now, but it works perfectly in IE8 and FF3
None.
Well than I'll have to stick with good old fashioned tables, seeing as how they can do things CSS cannot. It has a minor bug in IE7 I'm trying to fix right now, but it works perfectly in IE8 and FF3
How exactly, are you going to accomplish it using tables, that is unaccomplishable in CSS? Anything tables can do, CSS can do better. (
Including making tables)
None.
Well you just said what I want is not accomplishable in CSS. That the content cannot be atleast 100% of the screen, and then stretch beyond it with content without client-side scripting correct? Well I have tables set up that do that, and very well might I add. The only issue is that IE7 and earlier do not recognize the code and therefor does not display it correctly (not sure it picks the way to mess up that it does though) and I'm working on that right now.
None.
