How to set a dynamic width on a floating div?

Question

I have a div container with 3 div elements inside (A, B, and C). I'll know the width of the container and the width of A and B) the problem is that in some cases B won't be there in which case I need C to expand to fill the rest of the container. How would I do this with straight css or am I going to need to use javascript to calculate the width?

Thanks.

Answer 1

Using CSS 3 selectors, you can do something like this:

CONTAINER { width: 1000px }
CONTAINER A { width: 250px }
CONTAINER B { width: 250px }
CONTAINER C { width: 500px }
CONTAINER A + C { width: 750px } /* if C is next to A in the source, and assuming B is therefore not present, increase C's width to 750px. */

Of course, this method requires that the C element immediately follows A in the source. Also, it's worth mentioning the + selector (as well as a bucket load of other of awesome CSS3 stuff) isn't supported in IE6, but is supported in IE7, IE8 and all other A-grade browsers.

I can only pray that you've seen the light and dropped IE6 already.

Answer 2

I'm going to offer another separate answer using CSS 3 selectors. My other answer, while simple and elegant, may not be applicable to your particular situation.

A more bulletproof way of achieving what you're looking for is with this:

CONTAINER { width: 1000px }
CONTAINER A { width: 250px }
CONTAINER B { width: 250px }
CONTAINER C { width: 750px }
CONTAINER B ~ C { width: 500px } /* if the B element is present, and is a sibling of C, reduce C's width to 500px */

The only caveat to this method is that the B and C elements need to be siblings, and, by the sounds of things, they are in your case.

Answer 3

If you don't set a width at all or a hight for that matter than the div will not show unless there is something in it. You can use minimum and maximum width attributes to help manage this.

In this case I would have: divs for A, B, and C that have no properties and all float. Around those divs I would have the container div with a defined width and height and overflow set to hidden. I would give A, B, and C max widths that are appropriate (not sure if there will ever be a situation where say B and C are not there and A needs to fill).

Answer 4

You could use JQuery to calculate the width of "C" somthing along the lines of

var Container = $('#container').width();
var A = $('#A').width();
var B = $('#B').width();
var C = Container - (A+B);
$('#C').css('width', C +'px');

I havent tested it but you get the idea.

Answer 5

In your examble the contaner div has a width of 400px. The total width of div a and div b is 495px!

That's bigger than the width of the container and that's why div c was only covering the 400px.

But if you change the container's width to something like 900px, you will see that div c is taking the rest of the space. Here take a look: http://jsfiddle.net/SWQ6h/3/ .