How to make CSS columns in a div?


Tags: css,wordpress,wordpress-theming

Problem :

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.



Solution :

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

    CSS Howto..

    How to get my app to fill the full height on mobile?

    How to shift element upwards to it's variable height using css

    How to apply !important using .css()?

    How to achieve “paper-like” background effect? [closed]

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    How to write many functions in one JS function

    How to detect which part of page user is currently on, like on this page?

    CSS - How to match class (one dynamic and one static) between two elements

    How to save(download) HTML page with all images, css etc in Android?

    how to center and Crop an image to square with CSS

    Dropdown menu. make it show onclick and not onmouseover

    How to get a working CSS zigzag border?

    How to add CSS class to password field using jquery in MVC?

    How can I set up my menu to slide out, only when the header is hovered on?

    Li tag is not aligning correctly in Chrome. How to fix it?

    How do I get text side by side in HTML inside div?

    How to make value text in form be italic

    How to REALLY control font size in an eBay listing [closed]

    show content block on right above the content on right when displaying on mobile

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    How to select all a pseudo-classes in CSS?

    How to highlight table rows if error is found - Jquery

    How do I find out which style is overriding another style?

    How to align Navbar at bottom of window, but have content under this in CSS?

    How to create a speech bubble in css?

    How to change symbol(character) of iconmoon font by CSS?

    How to change background color for only one bootstrap popover

    How to disable caching of static assets like .css and .js in JSF2?

    CSS InfoBox over all elements how to place? [closed]

    How to make angled borders for tables.