Search code examples
csshtmlcss-floatclearfix

CSS expand div right floated div

I have a main div (purple) for this html header which splits in 2 other divs contaning the logo (red) and some other information on the right (green)

I have a clear fix for purple which makes both red and green float nicelly, both are floated to the left.

the problem here is that I am struggling to find a way to make green fits the entire width

in this case the red itself has 199px fixed width and no width declaration for green

the outer purple div doesn't have a fixed width too, it is at the moment 65% of the body which has a fluid layout

So my question is: how to make the green div expand till the end of purple div with css?

I've tried to apply a width:86% for green but it didn't work since red has a fixed value...

I thought that perhaps there is some table display mode like display:table-cell/table-row or something like this that could solve the problem but none of them seemed to work the way I want.

If you could help me on that it would be great :)

Solution

  • This may not be pretty, but it should work.

    1. Absolutely position the red div at 0,0
    2. Add a padding-left of 199px to the purple div
    3. Remove the float's from both the red and green divs