Grow your CSS skills. Land your dream job.

CSS Beginner – 2 column help

  • # November 17, 2008 at 5:54 pm

    Hi,

    I’ve been watching many of the video tutorials in order to learn CSS. I’m trying to put together a very basic site for my first one (trying to break old HTML habits), and I’m struggling with my <div>’s to setup my 2 column layout. Below my header/navigation, I’d like to have 2 columns within a "container" (white background). Here is my code, then below I’ll state the issues I’m having.

    HTML

    Code:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam et velit id tellus posuere mollis. Vestibulum ligula.Praesent

    Phasellus sed dolor. Suspendisse at ipsum vel turpis euismod sagittis. Pellentesque vulputate viverra lorem. Ut ipsum. Aliquam quam eros, lacinia sit amet.

    Donec tortor mi, condimentum sit amet, varius in, pellentesque ac, leo. Donec pulvinar blandit libero. Nulla et est vitae arcu porttitor vehicula. Phasellus nec


    CSS

    Code:
    body {
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-image: url(background_diagnal.gif);
    }

    .clear {
    clear: both;
    }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    div#main-content {
    background: #FFFFFF;
    border: 1px dotted #CBC9C9;
    }

    /* specific divs */

    ul#pageHeader {
    background-image: url(header.gif);
    background-repeat: no-repeat;
    height:150px;
    width:800px;
    list-style: none;
    }
    ul#pageHeader li{
    display: inline;
    width: 160px;
    float: left;
    margin-top: 125px;
    }
    ul#pageHeader li a {
    font: Georgia;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    }
    ul#pageHeader li a:hover, ul#pageHeader li a:active {
    text-decoration: underline;
    }
    ul#pageHeader li a:visited {
    color: #FFFFFF;
    }

    div#main-content {
    padding-bottom: 25px;
    }
    div#main-content div#left-col {
    float: left;
    width: 525 px;
    }
    div#main-content div#right-col {
    float: right;
    width: 275 px;
    border-top: 3px solid #999999;
    padding-top: 15px;
    }

    Link to site: http://www.kluesenerwedding.com

    1. How come my 2 columns are on top of each other
    2. In IE6, my navigation is not displaying like I would expect (where it is in Firefox)
    3. In IE6, my white background ("container") isn’t displaying as expected.

    Are #’s 2 & 3 IE6 issues?

    Thanks for the help!

    # November 17, 2008 at 5:59 pm

    You need to apply a width to left-col and right-col to make the line up side by side.

    # November 17, 2008 at 9:34 pm

    Did I not do that?

    div#main-content {
    padding-bottom: 25px;
    }
    div#main-content div#left-col {
    float: left;
    width: 525 px;
    }
    div#main-content div#right-col {
    float: right;
    width: 275 px;
    border-top: 3px solid #999999;
    padding-top: 15px;

    # November 17, 2008 at 11:49 pm

    It might be that space between the number and the value? I didn’t think that was a problem, but looking in Firebug, it’s not picking up that width attribute, which is causing them to sit on top of each other.

    # November 18, 2008 at 2:15 am

    try to not let this happen: width: 15 px;
    but do it always like this: width: 15px (notice no space between 15 and px)

    # November 18, 2008 at 7:58 am

    Thanks guys, that fixed it.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".