SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using clears in a center column

    Hello

    If I use the "float left column to left, float right column to right, add margins to centre column" method for making a 3 column layout, is there any way I can set it up so that I can still use "clear: both" for elements contained within the centre column? I've tried creating an extra containing div within the centre column, but it doesn't have the desired effect.

    *edit* a bit more research tells me I can solve it by floating teh containing div, which I have now done. However, I still have trouble with ie treating the right margin differently

    any help greatly appreciated

    Rhys

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    well, I fixed this myself

    I can now add floast and clears within the contenet area at will.

    So this adds to the body of info here, the solution was:

    CSS:


    Code CSS:
    #centerColumn {
    		padding : 0px 12px 0px 12px;	
    	margin: 0px 214px 0px 184px;
     
    }
     
    #content {
    	float: left; 
    	margin: 0px;
    	padding : 0px 0px 0px 0px;
    /*fix for ie*/
    	width: 98%;
    }
     
    html>body #content {
    	width: 100%;
    }

    MARKUP

    Code HTML4Strict:
    <div id="centerColumn">
    <div id="content">
     
    content in here
     
    </div>
    </div>

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

    As you found out when you clear a float you clear all floats above it in the html unless the current context is itself inside a float.

    This article explains it and offers the same solution that you used.


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
  •