• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

CSS height:100%

Datura

Datura

actually a very nice person
I'm working on a site with a two-column layout, and the left column has proven to very stubborn. The container div, as well as the page body and html elements, are set to height:100% in the CSS. Why, then, does giving height:100% to #left only make the div as high as the window? I'd like it to stretch down the whole page, as #right does.

If anybody could assist me, I'd be really grateful.
 
I think that's just how the height property works; the container that you're having things expanding their height to fit is the browser window itself and not the entire length of the page.

Getting rid of the float property in #left and setting the container div to display: table and the left and right divs to display: table-cell should work. That's the neatest solution I know of. Someone else might have something better, though.
 
Yeah, making columns have equal heights is one of those things that are really stupidly difficult in CSS. This guy's solution is pretty clean CSS-wise (i.e. no ugly CSS hacks), but requires extra container divs, doesn't account for borders as is, and would need yet another container for the centering you've got going on. You can look around for other ways by Googling "CSS equal height columns".
 
Last edited:
This may not be exactly the solution you're looking for, but when I had this problem, I gave the page a background image (that matched what the columns looked like) that was centered horizontally and repeated vertically. The column wasn't exactly going all the way down the page, but it looked like it was. It's kind of cheating, but it got me the look I wanted for the page.
 
Awesome, thanks everybody. I went ahead and used Eifie's solution, even though it's a bit of a hack-y solution. It's a one-page site for a class presentation, so I don't feel too bad.
 
You must log in or register to reply here.
Back
Top Bottom