none
Problem with 3 Column Fluid Layout RRS feed

  • Question

  •  I have made a 3 column fluid layout with min-width attributes that works OK except, the right side column appears to float over the center column (which has minimum width attribute)when the window is downsized. 

    The center column stops resizing at its' minimum width, as it should, but the right column, instead of holding its position upon reaching the center column min-width, slides over the center column pushing the center column content.

    Only the content of the center column is displaced, not the column itself??

    I have searched fourms, web, virtually everywhere, and found working models with complete different layouts (tables etc), but can't seem to undertsand how to get my CSS to work the way I want. 

    What am I missing?

    #container {
     background-image: url('../images/camo1.jpg');
     margin: auto;
     width: 100%;
     min-width: 950px;
     vertical-align: top;
    }

    #leftcolumn2 {
     margin: 3px;
     padding: 3px;
     width: 240px;
     float: left;
     background-image: url('../images/greybackground2.png');
    }

    #centercolumn {
     padding: 2px;
     border: medium inset #C0C0C0;
     margin: 5px 260px 5px 260px;
     background-image: url('../images/greybackground2.png');
     background-repeat: repeat;
     min-width: 700px;
    }

    #RHcolumn2 {
     padding: 3px;
     margin: 3px;
     width: 240px;
     float: right;
     background-image: url('../images/greybackground2.png');
     color: #FFFFFF;
     position: relative;
    }



    • Edited by nocoder Thursday, March 15, 2012 3:25 PM
    Thursday, March 15, 2012 3:13 PM

All replies

  • Three column layouts used to be called the 'holy grail' in terms of page design. These days, with improved CSS, they are much easier but still need care.

    There's a free three column template in the Expression Gallery you might find useful, either to use or to see how it's done.

    See http://gallery.expression.microsoft.com/3eqcolfxdwdth

    HTH


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web

    Thursday, March 15, 2012 3:23 PM
  • Thanks Ian,

     This template doesn't really address my situation. I don't have a problem making fixed width 3 column layouts. I can do that.

    I am trying to update my site for a fluid width layout.

    I almost have it, but haven't been able to overcome the RH DIV pusing my Center DIV content when the window is resized.

    Thanks again,

    Thursday, March 15, 2012 3:33 PM
  • First off, read the FAQ. That explains why we need to see the site in action. Post a link to the site.

    Secondly, there is a very good reason why fluid/liquid sites are seldom seen on the web any more. They kind of worked when there were only 2 common monitor sizes and 2 resolutions (800x600, 1024x768).

    But now, people could be viewing, commonly, on resolutions from 1024px wide to 1920px and in some cases from 800px (tablets in vertical mode) to 2048px (new iPad) and even higher (and much lower on smart phones). It is simply not possible to use a liquid display that looks good in full screen mode when the width can vary by 300% from one visitor to another. And people hate scrolling sideways.

    Use a fixed width (common modern width is 960 to 980px). Make your life easier, and your visitors'.


    Comic Sans walks into a bar. The bartender says, "Get out! We don't serve your type."


    Thursday, March 15, 2012 3:46 PM
  • You need a min width on the container as well - one that will accomodate the minimum width of the center column and whatever is the widest image or table you will put in both of the side columns. Using your current settings that width would be 1202 pixels and that won't fit without a horizontal scrollbar on any system with less than 1280 screen resolution. You should consider rethinking your page layout. My browser is set to approximately 1024 when I'm at my desk so I can have two windows open on my 1920 monitor without serious overlap. Three of the systems in regular use here use have 1024px screen resoltuions.

    Note margin: auto is not needed with width: 100%


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com

    Thursday, March 15, 2012 4:54 PM
  • OK, sorry, missed the fluid requirement. And as Bill says, fluid isn't a good idea in these days of widely varying monitor/device sizes. Plus, if your site is in any way consumer focused, you should look very carefully at making it mobile-friendly. An increasing number of internet users rely on mobile devices

    That said, the following amendments to your styles will give you a fully fluid design. (I've also removed the min-widths which restricted the size to larger displays).

    #container {
      background-image: url('../images/camo1.jpg');
      margin: margin: 0 auto 0 auto;
      width: 100%;
      vertical-align: top;
    }

    #leftcolumn2 {
      margin: 3px;
      padding: 3px;
      width: 20%;
      float: left;
      background-image: url('../images/greybackground2.png');
    }

    #centercolumn {
      padding: 2px;
      border: medium inset #C0C0C0;
      margin: 5px 22% 5px 22%;
      background-image: url('../images/greybackground2.png');
      background-repeat: repeat;
    }

    #RHcolumn2 {
      padding: 3px;
      margin: 3px;
      width: 20%;
      float: right;
      background-image: url('../images/greybackground2.png');
    }

     Note too that you need to order the columns:

    <div id="container"> <div id="RHcolumn2"> </div> <div id="leftcolumn2"> </div> <div id="centercolumn"> </div> </div>

    HTH


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web




    • Edited by Ian Haynes Thursday, March 15, 2012 5:12 PM
    Thursday, March 15, 2012 4:58 PM
  • Bill,

    Looking at his code he's using a semi fluid layout which can be okay but he's simply got his columns way too big for many displays.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com

    Thursday, March 15, 2012 5:01 PM
  • Thanks guys,

    Your quick response is great and very much appreciated. I am using EW 4 BTW.

    I do have a min-width on my container at 950. I have the min-width on the center column too high at 700, I realize that.

    I was playing with the CSS and set it high to see if my DIV was holding the width(700) as set, which it is. I originally had it set to 450, well within my 950 min container including the fixed width R & L DIVs. The RH column issue was still present.

    I am more interested, at this point, in understanding why the RH Div slides over the center, than in having the overall layout/design correct. I will correct the overall layout once I have a grasp on this.

     I simply posted where my CSS is set now. If you can help me uderstand what I am missing I can make the needed corrections.

    I have posted the page here http://www.adventurevideo.org/index_copy.html. See the right hand column resized with IE

    Of course, this is a copy of my current home page and the design is partial with odd colors, etc. I have several changes in mind. I need to overcome the 3 column issue first for this page.

     I am planning on changing my design to look more like my Commuinty site found at this link http://www.adventurevideo.org/Adventure_Community/index.php.

    The Community site looks great on my cell phone, my widescreen, my tablet, or anything else I have used. I want to be able to take advantage of the larger/higher resolution screens without wasting screen real estate with background.

    Thanks Again,


    • Edited by nocoder Thursday, March 15, 2012 5:34 PM
    Thursday, March 15, 2012 5:11 PM