Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Problem with rightcol displaying below leftcol in my web site need Help.

    This is the URL to my site. http://www.cascade.k12.or.us/cjh/staff/dbritton/

    The problem occurs in both IE and firefox. The rightcol is displayed below the leftcol instead of next to it. Any help would be appreciated I am a noob at using CSS.

    Thank You in advance.

    This is my CSS style sheet file.
    body {
    margin: 0;
    padding:0;
    background: #fff;
    color: #666;
    font: 100%/160% verdana,arial, helvetica, sans-serif;
    }

    #header {
    width: 100%;
    margin: 0;
    height: 60px;
    color: #000;
    }

    #pgheader {
    width: 100%;
    margin: 20px 20px 20px 220px;
    height: 80px;
    color: #000;
    }

    #pgheader2 {
    width: 100%;
    margin: 20px 20px 20px 220px;
    height: 385px;
    color: #000;
    }

    #leftcol {
    width: 200px;
    height: 400px;
    float: left;
    margin: 0;
    }

    #adcolumn {
    width: 120px;
    height: 800px;
    float: right;
    margin: 0;
    }

    #rightcol {
    width: 55%;
    margin: 20px 20px 20px 20px;
    padding: 0;
    border: 0;
    font-size: 67%;
    text-align: justify;
    }

    a,a:visited,a:active {
    font-weight: bold;
    color: #9FB6CD;
    text-decoration: none;
    outline: none;
    }

    a:hover {
    color: #4A708B;
    text-decoration: underline;
    }

    #nav {
    padding-left: 30px;
    margin: 5px 0 5px 0;
    }

    #nav {
    font-size: 6px;
    margin: 0;
    padding: 10;
    }

    h1 {
    font-size: 300%;
    margin: 0 0 10px 0;
    padding: 20px 0 0 20px;
    letter-spacing: -2px;
    text-transform: uppercase;
    }

    #leftcol h2 {
    font-size: 122%;
    text-transform: uppercase;
    padding: 0 0 0 20px;
    background: white url(img/line.gif) repeat-x 0% 5px;
    height: 22px;
    margin: 20px 0 0 18px;
    }

    h3 {
    font-size: 182%;
    color: #DC143C;
    margin: 0px;
    font-weight: normal;
    line-height: normal;
    }

    h4 {
    font-size: 152%;
    text-transform: uppercase;
    margin: 0;
    padding-top: 15px;
    }

    h5 {
    font-family: georgia,times new roman, times, serif;
    font-size: 122%;
    margin: 0;
    font-weight: normal;
    line-height: normal;
    }

    h6 {
    font-size: 107%;
    margin: 0;
    line-height: normal;
    }

    #info {
    border: 5px solid #B0C4DE;
    text-align: center;
    font-size: 92%;
    }

    .box {
    margin: 0 0 20px 20px;
    width: 180px;
    background: #BCD2EE;
    }

    .header ul {
    background: url(img/corners.gif) -15px -15px no-repeat;
    height: 15px;
    list-style: none;
    margin: 0;
    }

    .header ul li {
    float: right;
    background: url(img/corners.gif) 0px -15px no-repeat;
    width: 15px;
    line-height: 15px;
    }

    #content {
    font-size: 77%;
    padding: 0 10px;
    display: block;
    line-height: 150%;
    }

    .footer ul {
    background: url(img/corners.gif) -15px 0px no-repeat;
    height: 15px;
    list-style: none;
    margin: 0;
    }

    .footer ul li {
    float: right;
    background: url(img/corners.gif) 0px 0px no-repeat;
    width: 15px;
    line-height: 15px;
    }

    .box a,.box a:active,.box a:visited {
    color: #DC143C;
    font-weight: bold;
    }

    .news {
    border: 2px dotted #DC143C;
    padding: 5px 10px 5px 10px;
    margin: 20px 0px 20px 0px;
    }

    b,strong {
    font-size: 122%;
    }

    .important {
    font-size: 92%;
    color: #000;
    border-left: 1px solid #000;
    margin: 20px 0 20px 30px;
    padding-left: 10px;
    line-height: 150%;
    }

    img {
    float: left;
    margin: 6px 10px 10px 0px;
    }

    .productdesc {
    font-weight: bold;
    line-height: 140%;
    }

  • #2
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    dbritt, please use the [ CODE ][ /CODE ] (without the spaces) to wrap your code you are pasting in.

    That said. Add:

    Code:
    #rightcol {
        float: left;
    }

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello dbrit,

    Instead of floating your #rightcol left, just give it enough left margin to clear the #leftcol ...
    like this
    Code:
    #rightcol {
    width: 55%;
    margin: 20px 20px 20px 200px;
    padding: 0;
    border: 0;
    background: #000;
    font-size: 67%;
    text-align: justify;
    }
    Have a look at a typical 2 column layout at http://nopeople.com/CSS/equal_length_columns/index.html - view the source to see how it's done.

    Your #leftcol does not enclose it's content, put a background color on it just to see how it's not expanding to fit the content you've put in it.
    Like this -
    Code:
    #leftcol {
    width: 200px;
    height: 400px;
    float: left;
    margin: 0;
    background: #000;
    }
    If you remove the height: 400px; line you will see it grow to enclose all the content. At least you should, I didn't check but if you have anything floated in that column you may need to clear it. Have a look at the easy way of clearing floats using overflow: auto;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •