SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right hand side column wrapping left column.

    Hi All,

    Can anyone tell me why my right hand column is wrapping around the left column. If the content in the right column is shorter vertically than the left it is fine but as soon it it gets longer it wraps.

    Thanks

    Dan

    Code:
    p, td, ol, li, span, div, select, h1, form
    {
     font-family: verdana, helvetica, sans-serif;
     font-weight: normal;
     font-size: 11px;
     line-height: 14px;
     color: #336699;
     margin-left: 20px;
     margin-right: 20px;
    }
    #leftcol
    {
     width:150px;
     float:left;
     padding:15px;
     border-top:#369 1px solid;
     border-left:#369 1px solid;
     border-right:#369 1px solid;
     border-bottom:#369 1px solid;
    }
    #container
    {
     text-align:left;
     width:auto;
     clear: none;
    }
    Code:
    <body>
    <div id="leftcol">
    <p>Loads of content</p>
    </div>
    <div id="container">
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    <p>Loads of content</p>
    </div>
    </body>

  2. #2
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to clarify, I want the left hand column fixed width, and the right hand one fluid, but not wrapping.

    Ta

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it is just the way it works, you can fix it like this:
    #container
    {
    text-align:left;
    width:auto;
    clear: none;
    margin-left:150px;
    }

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Floating your menu will cause the content area to wrap around it. Here's another way to go about it:
    Code:
     #leftcol
    {
     width:150px;
     position: absolute;
     top: 0;
     left: 0;
     padding:15px;
     border: 1px solid #369; /*optimized ;)*/
    }
    #container
    {
     text-align:left;
     width:auto;
     clear: none;
     margin-left: 180px;
    }
    You may have to fiddle with the positioning of #leftcol to get it in the right place, but this will keep your columns separate.

  5. #5
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both! , and yes I really need to get into the habit of practising shorthand. To be honest I really should get in to the habit of reading the CSS Utopia book sometime!



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
  •