SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column left float, but how to achive 1 under 2?

    hi all

    created a 3 column layout last week all with float left, but ive come to the point were i need 1 column to strecth underneth 2 columns, i applyed the left float again and made the box bigger but it just does exatclly what is says (float left) how can i get it to sit just underneth with out pushing to the left?

    css:
    Code:
    .l{float:left;width:154px;}
    .m{float:left;width:400px;margin: 0px 13px;}
    .r {float:left;width:198px;}
    
    #the new one
    .mwide{float:left;width:611;}
    just so u understand a bit better here is the layout:

    what iv got :

    | .l | .m | .r |

    what i want:

    | .l | .m | .r |
    | .l |___________
    | .l | .mwide


    thanks hope u understand, please ask if u dont.

    cheers!!

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok do i need to apply an absolut or can i achive this with float and just have it underneth 154 from the left

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Gibraltar
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way I would do it is keep all with float:left

    Have them all in a container say 750pixels wide, and have column 1 at 250px, column 2 at 500pixels and column 3 at 750pixels will be forced to display underneath 1 and 2. 1 and 2 must equal the container.

    Obviously change the pixel widths to whatever you are using.
    Optional signature you may use to appear at bottom of your posts.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i already have them in a container but when i add the .mwide it goes striaght to the left and now it sits in the right place but just tight to the left

    the css:
    Code:
    .l{float:left;width:154px;}
    .m{float:left;width:400px;margin: 0px 13px;}
    .mwide{float:left;width:611;}
    .r {float:left;width:198px;}
    
    #wrapper{overflow:hidden; width:780px; margin: 0px 0px 0px 10px;}
    * html #wrapper{height:1%;}
    
    #M1{margin-top: 10px;}
    #M1 p {margin:0 0 1em 0;}
    #M2{margin-top: 10px;}
    html:
    HTML Code:
    <div class="m">
    <div id="M1">
    <p>middle</p>
    </div></div>
    
    <div class="r">
    <div id="R1">
    <p>right<p>
    </div>
    </div>
    
    <div class="mwide">
    <div id="M2">
    spread across m and r
    </div></div>
    thanks

  5. #5
    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,

    Its hard to say as I'm not quite sure what you want and there could be so many combinations but you probably need to sub divide the layout by separating the middle and right columns into a parent container.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer{
    width:778px;
    margin:auto;
    background:#ffffcc;
    overflow:hidden;
    }
    #left{
    float:left;
    width:154px;
    background:blue;
    }
    .rblock{
    width:624px;
    float:left;
    }
    #middle{
    float:left;
    width:400px;
    margin: 0px 13px;
    display:inline;/* ie double margin fix*/
    background:green
    }
    #right{
    float:left;
    width:198px;
    background:yellow;
    }
    .mwide{
    float:left;
    width:624px;
    background:red;
    }
    p{margin:0 0 1em 0}
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="left">
    <p>This is the left content: This is the left content: This is the left content: This is the left content: This is the left content: </p>
    </div>
    <div class="rblock">
    <div id="middle">
    <p>This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : </p>
    </div>
    <div id="right">
    <p>This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content : This is the right content :</p>
    </div>
    <div class="mwide"><p>This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : This will span 2 columns : </p></div>
     
    </div>
    </div>
    </body>
    </html>
    There's probably a load of different ways to do this depending on what you are trying to achieve.

    Hope it helps anyway.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul ill have a play around with this now, cheers for your time!!!

    THANKS ALL!!!!!!


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
  •