How to make CSS columns in a div? - css

Question

I am prototyping a Wordpress template and I'm trying to place the same elements on the header like this: http://dl.dropbox.com/u/768097/about.pdf
Here are the HTML and CSS files: http://acreedy.oliveandpickle.com/
I need 4 columns in the header and everything should be placed under the images.

Answer 1

HTML:
<div id="header">
<h1>Alan Creedy</h1>
<ul id="quickInfo">
<li class="mission">Mission Statement</li>
<li>Helping People Think for Themselves</li>
<li>1.919.926.0688</li>
<li>Email Me</li>
</ul>
<ul id="menu">
<li class="current">Home</li>
<li>About</li>
<li>Best Practice Ideas</li>
<li>Management Tools</li>
<li>Preneed</li>
<li>Case Studies</li>
<li>Recommended Resources</li>
<li>Think Tank Forum</li>
</ul>
</div>
CSS:
#header {
border-bottom:3px solid #1582AB;
height:200px;
margin:0 auto;
padding:46px 0 0;
width:1000px;
position:relative;
}
#header h1 {
background:url("images/alan_creedy_headshot_transparent.png") no-repeat left top;
font-size:40px;
height:140px;
padding:8px 0 0 215px;
margin:0;
}
#quickInfo {
position:absolute;
right:10px;
top:10px;
width:400px;
}
#quickInfo li {
list-style-type:none;
}
.mission {
font-size:18px;
}
#menu {
margin:0 auto;
padding:0;
width:1000px;
}

Answer 2

Floating left will most certainly fix your issue, though keep in mind whenever you add padding or margin to your floated element that you will have to adjust your width as well. I checked out your page and you didn't compensate that change. Fix the width accordingly and you should be good to go :D
~ Chris
http://twitter.com/TheCSSGuru

Answer 3

If you're using html5 then you could use aside or section elements instead of div's.
<style>
.column {
float: left;
width: 200px;}
</style>
<aside class="column">
Column1
</aside>
<section class="column">
Column2
</section>
<section class="column">
Column3
</section>
<section class="column">
Column4
</section>