Styling for page banner in three columns


I would like to have a page banner consisting of an image on the left, a textual page heading in the centre and horizontal navigation on the right.

The image will have the greatest depth.

I have tried using a table and floating three boxes horizontally put cannot figure how to do this and consider different screen widths at the same time.

Thanks in anticipation.

How about inline-block? Have you tried inline-block?

It would be helpful if you could show us some code (a working page) so we could see what you have done and where you might be going. There are so many ways to do this and so many factors to consider that we could guess for a long time before stumbling onto something you like. A screen shot or drawing showing how the menu should look at the widest widths and at the narrowest widths would be a big help. Describing the range of screen widths that you would like to accommodate and the range of browsers might help, too. The table approach may be the easiest, but we haven’t seen enough code or heard enough description to recommend anything for sure. Sizes matter.


As Ron said it all depends of the dynamics of the page so there are hundreds of answers.

If the left image is the same width as the right navigation then just float the image left and float the navigation right and then any following text will center between the two assuming there is room and that the parent has text-align:center.