SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 Column Layout with Float and Clear in Center Column

    I am having problems clearing a floated object in the center column of a 3 col layout. The 3 col layout has floating left/right columns. In the center I am floating a div to the left. When I attempt to clear the object in the center it attempts to clear the left column instead. I give up. Please help

    Sample code is posted below:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
       div { padding: 10px; }
       #main { width: 500px; background-color: green; }
       #leftcol { float: left; width: 100px; height: 175px; background-color: Yellow; }
       #rightcol { float: right; width: 100px; height: 300px; background-color: Orange; }
       #centercol { margin-left: 120px; margin-right: 120px; background-color: White; }
       #centerGrayBox { float: left; width: 75px; height: 100px;  background: grey; display: block; }
       #centerBlueBox { clear: left; background-color: Blue; }
       #bottomBox { clear: both; background-color: Purple; }
    </style>
    </head>
    <body>
    <h2>Basic 3 col layout</h2>
    <div id="main">
       <div id="leftCol">
          float: left;<br />
          width: 100px<br />
       </div>
       <div id="rightCol">
          float: right;<br />
          width: 100px<br />
       </div>
       <div id="centerCol">
          #centerCol<br />
          <div id="centerGrayBox">
            float: left;<br />
            width: 75px;
          </div>
          i want to clear the grey box so the next div is right under it.
       <div id="centerBlueBox">
          clear:left puts this box too far down...I want this div to be right under the grey one!
       </div>
    </div>
    <div id="bottomBox">#bottomBox (clear: both)</div>
    </div>
    </body>
    </html>
    Screen Shot:

    Capture.PNG

    Thanks!

  2. #2
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You're rendering in quirks mode. I'd fix that first. Add a doctype.

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any ideas how to fix this one?

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,203
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Hi, Action Jackson. Welcome to the forums.

    Which browser(s) are you using? I've tested it in Firefox8 and Chromium on Linux, and it seems to be doing exactly what you want i.e. the blue div sits immediately under the grey div, with no space in between. Your screen-shot is still pending approval, so maybe I've misunderstood the problem.

    Quote Originally Posted by imaginekitty View Post
    Add a doctype.
    Isn't <!DOCTYPE html> an HTML5 doctype?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    When you clear a float you clear all floats above it in the html which in your case is the floated left column so the element moves down below the left column just as you told it to do . To contain the effect of the clear property the element must have a parent that establishes a new block formatting context. Elements which create block formatting contexts are floats, elements with overflow other than visible, elements with display:inline-block or table-cells.

    The easiest solution in your case is to add an inner 100% wide floated element in the middle column to contain all the content in that column and to stop the clear affecting floats outside that current context.
    Code:
    .inner{width:100%;float:left}
    Code:
    	
    <div id="centercol">
     <div class="inner">
      <p>content here</p>
     </div>
    </div>
    You can do it without an extra div by using overflow:hidden on your centre column (and applying haslayout for IE6) but does mean that overflowing content may be hidden and possible a scroll bar may not appear when needed.

    This old demo explains the problem and shows the solution.

    Quote Originally Posted by TechnoBear
    Which browser(s) are you using? I've tested it in Firefox8 and Chromium on Linux, and it seems to be doing exactly what you want
    The OPs demo is flawed as they have used camelCase in the html so the demo isn't working unless you change the classes to match the css

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,203
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The OPs demo is flawed as they have used camelCase in the html so the demo isn't working unless you change the classes to match the css
    Ah - that will teach me not to try these things on only one cup of coffee.

  7. #7
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    ... Isn't <!DOCTYPE html> an HTML5 doctype?
    Yes, but I don't think it was there originally. See the same question on another forum.

    I believe that the lack of doctype originally allowed the camelCased markup to work with the non-camelCased styling.


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
  •