SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding 3rd Column

    Hello,

    I'm having a sort of two columns layout and I'm having troubles adding a 3rd one.

    CSS for my left column is:
    Code CSS:
    #leftmenu {
    position : absolute;
    left : 0px;
    width : 180px;
    height:auto;
    background-color: WhiteSmoke;
    padding-top: 5px;
    }

    CSS for my main second column is:
    Code CSS:
    #main {
    margin-left : 180px; 
    background-color : White;
    padding : 10px;
    padding-bottom: 30px;
    border-left : 1px solid #555;
    border-bottom : 4px solid Black;
    }

    How do I add 3rd column? Considering that fact that the "width" attribute isn't set in #main.

  2. #2
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Someone may have a better way but this is what I've used in a 3 column page
    Code:
    <style type="text/css">
    <!--
    #leftDiv {
        clear: none;
        float: left;
        width: 35%;
    }
    
    #centreDiv {
        width: 30%;
        float: left;
        clear: none;
        text-align: center;
    }
    
    #rightDiv {
        clear: none;
        float: left;
        width: 35%;
        text-align: right;
    }
    
    -->
    </style>
    The problems I've had(having) are to do with the Float/Clear properties so check those.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It would be best to loose the absolute positioning on your left column and use a float based layout.

    We have literally beat the three column layouts to death in this forum. There are many demo layouts around here and you will probably find what you are wanting by looking through some examples.

    CSS Layout Demos

    pmob CSS Examples

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Here is a sticky thread in this forum that you may find very useful.

    Cheers.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •