CSS: Placing divs left/center/right inside header

Question

I\'ve been trying to create a site with the following structure:

But I can\'t seem to get the header correct (e1 left, e2 centered, e3 right). I want the three

Answer 1

Utilize the Magic of Overflow: Hidden

If you can swap the html position of 2 & 3 like so:

    1 is wider


    3 is also


    2 conforms

Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).

#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}

Technically, you could keep your current html order and your float: left on both 1 & 2 and make 3 the flex div with overflow: hidden. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right with 1 having overflow: hidden. To me it would seem best to have the middle flex, but you know your application better than I.