3-column layout with fixed-width middle column?

I recently found a page that shows how to create a layout where the left and right column have with fixed width, and the middle column takes up the remaining space.

In my case, I’d like to have a fixed-width middle column, and that the left and right columns take up all remaining space equally between both columns. There can’t be any overlapping between the middle column and the left/right columns.

Any help is appreciated.

Thanks.

Hi vmhatup, Welcome to SitePoint! :slight_smile:

Yes that can be done but it requires some trickery with floats and negative margins.

Here is a live example of the layout you have described.
http://www.css-lab.com/demos/3col-fluid/3col-fix-cntr.html

Here is an exploded view of the general float structure.
http://www.css-lab.com/demos/3col-fluid/50-50-fixcenter.html

With that last link I posted, drag your browser window back and forth and you will see the 50/50 floats (pink and palegreen) drop down as the widow is re-sized. It is those floats that get negative margins which allow the fixed width center column to stay in place.

The wrapper div is set in a %width so it will adjust to your viewport and let the sidebars extend so you can see what is going on. You can also view the page source for the css/html.

Thanks for your reply. I still need to insert the listview to see how it looks.

Thanks again.