• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

CSS expanding div

 
Ranch Hand
Posts: 47
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am trying to create a style sheet which has two div's side by side. The problem is, I want them to match in height, and the main div on the right can be of any height.


Here are the two divs. As you can see, here I am setting the left div to be 100% in height.. however, it does not grow with content-main. Content-main is a table which can have anywhere from 3 to 30 entries in it.

How should I approach this so the two div's are always matched in height, yet variable in height?

I wish for content main to be a minimum height of 1
 
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Tom Joiner:
I am trying to create a style sheet which has two div's side by side. The problem is, I want them to match in height, and the main div on the right can be of any height.


Here are the two divs. As you can see, here I am setting the left div to be 100% in height.. however, it does not grow with content-main. Content-main is a table which can have anywhere from 3 to 30 entries in it.

How should I approach this so the two div's are always matched in height, yet variable in height?

I wish for content main to be a minimum height of 1



Unfortunately, I don't think that it is possible to use CSS to force one div's height to depend on the height of the div next to it. The best thing I could come up with was to put them both inside another div, set the content-left div's height to 100% and hope that the outer div's size would be driven by the table in the content-main div. Unfortunately, it looks like the content-left div forces the outer div's height to also be 100%. It might be possible to do it along those lines, but I wasn't able to figure out the right combination to make it work

The best alternative I can think of would be to use Javascript that updates the height of the content-left div with the height of the content-main div whenever the content-main div is resized... though if there's a better alternative, I'd like to know about it too!
 
Joel Jorgensen
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Of course I say that and then I realize there might be a way to do it. Would it work if you put content-main inside of content-left and made content-main float: right? You might have to do some tweaking on the widths, padding, and margins (and you'd probably want to update the div ids to reflect the new layout) but its the closest thing I can come up with to do what you're trying to do.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

Look at that if you want to use some JS

Eric
 
reply
    Bookmark Topic Watch Topic
  • New Topic