SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vmhatup View Post
    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.
    Hi vmhatup, Welcome to SitePoint!

    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-fl...-fix-cntr.html

    Here is an exploded view of the general float structure.
    http://www.css-lab.com/demos/3col-fl...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.

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I still need to insert the listview to see how it looks.

    Thanks again.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •