CSS Beginner – 2 column help

[H2oskier]

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:

• Home
• Our Story
• The Wedding
• Guest Information
• Messages

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!

[chazzwick]

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

[H2oskier]

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;

[H2oskier]

Thanks guys, that fixed it.

[Author]

Posts