aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes CSS expanding div Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS expanding div" Watch "CSS expanding div" New topic
Author

CSS expanding div

Tom Joiner
Ranch Hand

Joined: Sep 19, 2006
Posts: 47
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


SCJP
Joel Jorgensen
Greenhorn

Joined: Oct 13, 2006
Posts: 22
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!


Go is to the fountain.
Joel Jorgensen
Greenhorn

Joined: Oct 13, 2006
Posts: 22
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.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

Look at that if you want to use some JS

Eric
 
Consider Paul's rocket mass heater.
 
subject: CSS expanding div