How Do I Stretch Two Div-elements To Fill Available Horizontal Space?

I really hope that you can help me. I created this fiddle to show what I'm trying to do. My question is: How do I stretch two div-elements to fill available horizontal space? As yo

Solution 1:

One way to solve this is to treat your divs like the cells of a table. A unique property of tables is that the cells will fill the width of the table no matter what widths you give them. By giving some cells a width the other cells will fill the remaining space. By using display:table and display:table-cell you can take advantage of this without changing your html. Have a look at this example:

http://jsfiddle.net/GyxWm/

I've not tested this but it should work in all "current" browsers. It should work in IE8+ but probably doesn't work in IE7 and certainly won't work in IE6.

Solution 2:

You can do it with help of javascript. Change div tags like this: <div id="part1" class="sectionFillUp">section2</div><div id="part2" class="sectionFillUp">section4</div>

And add this javascript somehwere after those tags:

var elem1 = document.getElementById("part1");
    elem1.style.width = (screen.width - 150)/2;
    var elem2 = document.getElementById("part2");
    elem2.style.width = (screen.width - 150)/2;

And remove width:50%; from sectionFillUp in css

Solution 3:

Afraid I dont think you can.

The float:left; removes your code from the containing div and all the elements end up next to each other, once an element leaves the screen to the right, it wraps underneath leaving a space (a bit like relative positioning does).

Also, you are attempting to compare a fixed width with a variable width, which is close to impossible.

If you take a look here: http://jsfiddle.net/P5Kjh/5/

First I reduced your code back to 2 divs and got that working.

I've added overflow:hidden to the backgroundG class to make sure there is a grey background and floated both divs left.

Then I set the widths, the cumulative total has to be around 100%, if you add a border to each element you need to work to a smaller percentage.

Then I added back the other 3 in a new backgroundG element and created a separte class for the fillup element so it would be 80% (without a border).

Probably doesnt help you a lot. sorry if not.

Cheers