SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two column float problem

    I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns.

    the attempt is here:

    http://www.jimpix.co.uk/rejig/008.htm

    I have the two content columns defined as:

    #leftcol {
    width:70%;
    float:left;
    border:1px solid black;
    }

    #rightcol {
    width:25%;
    float:right;
    border:1px solid black;
    }

    The above divs sit within a main 'content' div:

    #content {
    padding:10px;
    border-top:2px solid #999999;
    border-bottom:10px solid black;
    }

    But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns.

    Can anyone see what I am doing wrong please?

    Thanks

    Jim

  2. #2
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This is an excellent guide and various hacks to get your layout organized on most browsers if not all.

    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Midwest
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    change the right column to float: left; that will force that column to butt up against the left column

    also, i'm trying to figure out why you are using percentages instead of fixed widths since the container is fixed.

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try setting the content div to display:table

    For IE try * html #content{height:1%}

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add a "<div>" with "clear:both;" set. That's how I do my two column layout.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

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

    Blue Dragon is correct and you just need to clear the floats. Floats are removed from the flow and if a container only contains floats then in fact it is empty and has no height. A float will not stretch the parent container (in good browers).

    You need to explicitly clear the float using any one of a number of methods.

    here is a reliable method:
    Code:
    .clearer{
    height:1%;
    overflow:hidden;
    margin-top:-1px;
    clear:both
    }
    Code:
    		will be introduced to handle cheque request payments (M11CR) in order 
    		to address the current poor practice of cheques being sent to individuals 
    		in Services for onward transmission to the creditor.</p>
    	</div>
    <div class="clearer"></div>
    </div>
    <div id="footer"> 
    	<p align="center">&copy; 2005</p>
    </div>
    </div>
    </body>
    </html>

    Hope that helps.

  7. #7
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure you get a correct DOCTYPE in there as well.
    Ryan Butler

    Midwest Web Design


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
  •