Thu, 2010-09-09 13:28
I've been on and off doing web designs for many years and never really gone the whole way, so please forgive me if I've missed something obvious.
//mode edit: development links removed at OP's request --gt
I want the layout to have a central column that doesn't start at the top of the page, but continues to the very bottom of the window. If the browser is maximized this is achieved, but if I reduce it so there are scroll-bars then the white background does not continue to the bottom.
The parts of the CSS that I think are most relevant are:
#wrapper { margin-left: auto; margin-right: auto; width: 750px; height: auto; } #contents { width: 720px; background-color: #FFFFFF; position:absolute; bottom:0; top:28px; padding: 22px; padding-left: 29px; padding-right: 29px; height: auto; } #maintext { margin-top: 17px; width: 470px; float: right; font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif; } #sidetext { margin-top: 50px; width: 180px; float: left; font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif; font-size: 11pt; }
I've been looking around a lot of things to do with "height: 100%", "min-height: 100%", faux columns but none of these are working for me, at least the way I tried them. I'm sure there is something wrong with the CSS instead of the page, and I'd really appreciate some expert help here. I'm sorry if this has been covered before but I can't seem to find a solution myself. Maybe it's something to do with "absolute" positioning of some of the elements, or floating the text content? I'm going in circles and really would like to lock down the design so I can get started on the content.
I would really appreciate your help here.
Many thanks
Fri, 2010-09-10 11:22
#1
Right track
I've been looking around a lot of things to do with "height: 100%", "min-height: 100%", faux columns but none of these are working for me...
But those are on the right track.
The problem is, if you want the white area to be 100% high, you can't then say "but not the top". But that's ok: we can fake it.
You know the drill for 100% height right?
html, body { height: 100%; } #contents { width: 720px; min-height: 100%; margin: 0 auto; background-color: #fff; } * html #contents {height: 100%;}
(you don't need #wrapper in this example)
That's the basics of it. Don't absolutely position #contents, though I guess you could do it that way if you set the body to position: relative, but that causes IE bugs you don't want. So the 100% height way might be easiest.
Now, to go further from here, you'll need one or two more elements.
If you want the side padding on the #contents div, you can do that, but you can't have top/bottom padding because you've set it to 100% high, and padding (like margin and border) get added to that height, and you can't have more than 100% (except in IE6 which does "fuzzy math" lawlz).
So inside #contents is another box that otherwise wraps everything inside #contents. This box will have your bottom padding, could have side margins (instead of the side padding on #contents, but that's up to you), and most importantly, will have top padding equal to the space you want between the top of the viewport and the top of the white area (in your code, it looks to be 28px).
In that padding, you can set a background image that is the same as your background image on the body. This does mean you'll need an image that's 28px tall and can be repeated-x across the top, and positioned at the top of the div inside #contents. I'll call that div #trick since it's there to make a visual trick.
<body> <div id="contents"> <div id="trick"> all the content on the page is in here... </div> </div> </body>
so #trick has
#trick { padding: 28px 29px; background: url(the28pxhighimage.png) 0 0 repeat-x; }
You can also make the top padding even larger to push the inner content a bit away from the new white edge, and that would work since your image is still only 28px tall.
By the way, where is your h1 tag? : )
Fri, 2010-09-17 10:20
#2
Thank you so much Stomme
Thank you so much Stomme poes.
I've changed the design so that I've put a background image in the 100% height block to make it look like a seperate element from the top. I was still having problems getting the block to stretch to the divs I put inside it, but you led me in the direction of "clear: both", and even though it does seem really clunky the way I've done it, it seems to work. I think because my div elements were "floating" inside the contents div they didn't push the height down to the bottom. Maybe I shouldn't be using "floats" in the first place? I really don't know enough about what is the standard way to do these things.
And thanks for reminding me about the tag, that was really sloppy of me 
Thu, 2010-11-18 01:25
#3
Please delete links from original post
I hope this thread will remain as a reference for others in a similar situation, but please can an ADMIN or MODERATOR delete the links from the original post? Many thanks.
//mod edit: done --gt