Forums

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

<html>
<head>
<title>Kluesener Wedding</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<link href=\"wedding.css\" rel=\"stylesheet\" type=\"text/css\">
</head>

<body>
	<div id=\"page-wrap\">
		<ul id=\"pageHeader\">
			<li><a href=\"#\">Home</a></li>
			<li><a href=\"#\">Our Story</a></li>
			<li><a href=\"#\">The Wedding</a></li>
			<li><a href=\"#\">Guest Information</a></li>
			<li><a href=\"#\">Messages</a></li>
		</ul>	
	
	<div id=\"main-content\"> 
	
	<div id=\"left-col\">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam et velit id tellus posuere mollis. Vestibulum ligula.Praesent </p>

			<p>Phasellus sed dolor. Suspendisse at ipsum vel turpis euismod sagittis. Pellentesque vulputate viverra lorem. Ut ipsum. Aliquam quam eros, lacinia sit amet.</p>
	
	</div> <!-- END left-col -->
	
	<div id=\"right-col\">
	<p>Donec tortor mi, condimentum sit amet, varius in, pellentesque ac, leo. Donec pulvinar blandit libero. Nulla et est vitae arcu porttitor vehicula. Phasellus nec</p>
	</div> <!-- END right col -->
	
	<div class=\"clear\"></div>  		
	
	</div> <!-- END	 main-content -->
	
	</div> <!-- END PAGE WRAP -->	

</body>
</html>

CSS

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;

chriscoyier

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.

ikthius

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

H2oskier

Thanks guys, that fixed it.

treehouse : what would you like to learn today?

Forums

CSS Beginner - 2 column help