Why won't my 2 column css display properly? - Chime Host

Yvette! · #1 (**permalink**) 10-18-2009, 05:55 PM

I've asked this before but its still not working, and someone said they need all my code, so here it is. Column b won't align properly to the right with a, the text starts underneath a in its side of the screen.

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Artist Market- Where and When</title>
<link href="art2stylescontent.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="outerwrapper">
<div id="wrapper">

<div id="navigation">
<img src="images/home_navigation.jpg" width="1004" height="148" alt="flash placeholder" />
</div>

<div id="pageheaderww">
Where and When
</div>

<div id="content">
this is where the flash map is going to go,
</div>

<div id="columna">
<h1>Parking Details</h1>
Please park your car around the corner, and not on the grass behind the market.
Please park your car around the corner, and not on the grass behind the market.
Please park your car around the corner, and not on the grass behind the market.
Please park your car around the corner, and not on the grass behind the market.
Please park your car around the corner, and not on the grass behind the market.
Please park your car around the corner, and not on the grass behind the market.
Please park your car around the corner, and not on the grass behind the market.
</div>

<div id="columnb">
<h1> Market Dates </h1>
The Artist market is on the first Sunday of every month from 8:30am to 1:30pm.
<ul>
<li>Sunday 7 June 2009</li>
<li>Sunday 5 July 2009</li>
<li>Sunday 2 August 2009</li>
<li>Sunday 6 September 2009</li>
<li>Sunday 4 October 2009</li>
<li>Saturday 31 October 2009</li>
<li>Sunday 6 December 2009</li>
</ul>
</div>

<div class="centre" id="footer">
<b>© 2009 The Artist Market</b>
</div>

</div>
</div>
</body>
</html>

css:

@charset "utf-8";

body {
margin: 0px;
padding:0px;
}

p {
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#403B31;
}

h1 {
font-family:Tahoma, Geneva, sans-serif;
color:#FFF;
font-size:17px;
}

h2 {
font-family:Tahoma, Geneva, sans-serif;
color:#807761;
font-size:15px;
font-weight: bold;
}

h3 {
font-family:Tahoma, Geneva, sans-serif;
color:#403B31;
font-size:13px;
font-weight: normal;
}

#outerwrapper {
background-image:url(images/shadow.jpg);
background-repeat: repeat-y;
background-position: center;

}

#wrapper {
width:1004px;
height:500px;
margin-left: auto;
margin-right: auto;
height:inherit;
background-color:#F7EBCC;

}

#navigation {
background-image:url(images/home_navigation.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 148px;
}

#pageheaderww {
background-color:#C72586;
font-family:Tahoma, Geneva, sans-serif;
color:#FFF;
font-size:17px;
text-align:center;
}

#content {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #CCC4B0;
}

#columna {
float: left;
width: 502px;
border-right-width:thin;
border-right-style:solid;
border-right-color:#CCC4B0;
}

#columnb {
float: right;
width: 502px;
}

#footer {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
clear:both;
background-color:#CCC4B0;
color:#403B31;
}

/*
Classes
*/

.centre {
text-align:center;
}

.featureimage {
display:inline;
border: thin solid #807761;
}

BOoBOo · #2 (**permalink**) 10-18-2009, 06:05 PM

I wasn't sure how you wanted the content to be laid out but i think this is more simple if you just want to list your information in 2 coulumns -

Quote:

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode