How to do CSS columns in one div?

Question

Hi,

I am prototyping a Wordpress template and I am trying to place the same elements on the header like so: http://dl.dropbox.com/u/768097/about.pdf

I have been trying to get it to work, but need some help. Can any one help?

Here is the html and css files: http://acreedy.oliveandpickle.com/

I will need 4 columns in the header and everything is just placed under the images.

Thanks in advance!

Answer 1

http://www.ehow.com/how_2084304_columns-css-float.html

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>

Answer 4

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><a href="#contact">Email Me</a></li>
    </ul>

    <ul id="menu">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#BestPracticeIdeas">Best Practice Ideas</a></li>
        <li><a href="#ManagementTools">Management Tools</a></li>
        <li><a href="#Preneed">Preneed</a></li>
        <li><a href="#CaseStudies">Case Studies</a></li>
        <li><a href="#RecommendedResources">Recommended Resources</a></li>
        <li><a href="#ThinkTankForum">Think Tank Forum</a></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;
}