Как сделать столбцы CSS в div?

Question

Я прототипирования шаблон Wordpress, и я пытаюсь поставить те же элементы на header, как это: http://dl.dropbox.com/u/768097/about.pdf

Вот HTML и CSS файлы: http://acreedy.oliveandpickle.com/

мне нужны 4 колонки в header и все должно быть помещено под изображениями.

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><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; 
} 

Answer 2

Плавающие левые, безусловно, исправят вашу проблему, хотя имейте в виду, когда вы добавляете дополнение или маржу к вашему плавающему элементу, который вам также придется регулировать. Я проверил вашу страницу, и вы не компенсировали это изменение. Зафиксировать ширину соответственно, и вы должны быть хорошо идти: D

~ Крис

http://twitter.com/TheCSSGuru

Answer 3

Если вы используете HTML5, то вы могли бы использовать в сторону или раздел элементы вместо Div-х годов.

<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>