1

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 :)

Community
  • 1
  • 1
zanona
  • 12,345
  • 25
  • 86
  • 141
  • The link to your image is broken, could you perhaps put the html up on http://jsfiddle.net/ ? – Graham Conzett Mar 11 '11 at 17:31
  • @Graham Conzett just fixed this link, should work fine now...actually the code in this case doesn't matter to much you will see that its a very simple thing to achieve, but if you have any problems please let me know – zanona Mar 11 '11 at 17:34

3 Answers3

2

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
tilleryj
  • 14,259
  • 3
  • 23
  • 22
0

Just using a float: left on the red div does the trick.

http://jsfiddle.net/Jk5BE/2/

Haza
  • 2,991
  • 1
  • 16
  • 13
0

This is my favorite solution for this type of problem, bonus is that it doesn't even use a wrapper and you can add other columns (although it looks like in your case a wrap will be needed since this looks like a header):

http://www.alistapart.com/d/holygrail/example_4.html

You could do it very simply just using a simple float as well:

http://jsfiddle.net/W3DEC/

Graham Conzett
  • 8,344
  • 11
  • 55
  • 94
  • hey Graham, thanks for the tip but unfortunately this doesn't seem to work when you have multiple lines. I've just updated your snippet at http://jsfiddle.net/W3DEC/2/ note that when the right div has more than one line it seems only the first line floats and the second stay bellow :( if I this could be fixed I am pretty sure I would use it all the time, meanwhile I had to adopt tilleryj answer which is not pretty as he said but works quite well. – zanona Mar 13 '11 at 12:29
  • Correct, from your example image it looked like the two sections shared a common height, if you just set that implicitly it works: http://jsfiddle.net/W3DEC/3/ – Graham Conzett Mar 13 '11 at 17:07