CODEWITHSUNDEEP
htmlcss
Teleport
Teleport

Reputation: 85

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 you can see there are 5 div-elements strung together, wrapped by a div-element where I set the background-color and width with 100%.

There are three div-elements with a width of 50px.

The width of the other two div-elements should fill up to the rest availiable space, they should have the same width, too ->50% for each of both divs.

My problem is that the 50% for those both div-elements amount to a 100% total-width. And not to a availiable space width.

I'm trying not to use tables, etc.

Let me know if there is something unclear.

EDIT: I'd like to hear your comments about this way.

Upvotes: 7

Views: 7183

Answers (3)

Simon Dyson
Simon Dyson

Reputation: 645

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.

Upvotes: 5

Caner
Caner

Reputation: 59168

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

Upvotes: -1

Luke Duddridge
Luke Duddridge

Reputation: 4347

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

Upvotes: -2

Related Questions