Question

I’m trying to create a left, center, right alignment in a header … with objectives being:

1. Top level DIV that holds the toolbar should size to it’s content.
2. The Left and Right div have fixed sizes but the middle should take up the remaining space.

My example: http://jsfiddle.net/WarrickF/bx3tw/

Sort of works, but my CSS us really rusty and I can’t quite get my head around how to do in a simple and clean manner. As soon as I go with the position absolute approach, the header div is not longer aware of the size of the contents. One could imaging the right div having a search box.

Does anyone know a simple and clean way to do this?

Thanks
Warrick

Answer 1

Make your left and right divs floating, and omit the width of the center div.

I have updated your fiddle http://jsfiddle.net/bx3tw/1/