The Cave of Dragonflies forums

Go Back   The Cave of Dragonflies forums > Websites > Webmaster Help and Discussion

Notices

Reply
 
Thread Tools
  #1  
Old 04-07-2012, 06:46 AM
Datura's Avatar
Datura Datura is offline
actually a very nice person
 
Join Date: November 8, 2011
Posts: 240
Pronoun: He
Datura is an unknown quantity at this point
Default CSS height:100%

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.
__________________
Reply With Quote
  #2  
Old 04-07-2012, 01:55 PM
Eifie's Avatar
Eifie Eifie is offline
oh man, good times.
 
Join Date: June 25, 2008
Posts: 2,659
Pronoun: She
Eifie is an unknown quantity at this point
Default Re: CSS height:100%

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.
__________________



Reply With Quote
  #3  
Old 04-07-2012, 05:37 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 27
Posts: 2,393
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default Re: CSS height:100%

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".
__________________
Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.

Last edited by Butterfree; 04-07-2012 at 05:51 PM.
Reply With Quote
  #4  
Old 04-07-2012, 05:57 PM
Sandstone-Shadow's Avatar
Sandstone-Shadow Sandstone-Shadow is offline
A chickadee in love with the sky
 
Join Date: August 5, 2008
Location: In between
Posts: 1,130
Pronoun: she
Sandstone-Shadow is an unknown quantity at this point
Default Re: CSS height:100%

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.
Reply With Quote
  #5  
Old 04-07-2012, 09:35 PM
Datura's Avatar
Datura Datura is offline
actually a very nice person
 
Join Date: November 8, 2011
Posts: 240
Pronoun: He
Datura is an unknown quantity at this point
Default Re: CSS height:100%

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.
__________________
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:12 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Pokémon, Pikachu and all other Pokémon characters © Nintendo, Game Freak and Creatures Inc. The Cave of Dragonflies, content, styles, etc. © Butterfree/Dragonfree/antialiasis.
Forum now hosted by Eevee's HQ.