Forums

  • # 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:


    Kluesener Wedding

    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 18, 2008 at 7:58 am

    Thanks guys, that fixed it.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag