CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

Solutions to common CSS issues

Lately I've been having a lot of people come by and ask me some real common CSS questions, so here I am writing up some of the answers. I hope I can cover the majority of them with quick solutions, if they don't make sense or you have a question you can contact me and I'll get right back to you.

Topics:

Problem

Horizontal center aligning a site without tables

Solution

There are 2 common ways to do this, I prefer the first one:

auto margin

body{text-align:center;}
#wrap{width:76em;margin:0 auto;}

absolute positioning

#wrap{
    width:760px;
    position:absolute;
    left:50%;
    margin-left:-380px;
}

Problem

Basic column layout

Solution

There's a bunch of solutions to this, I'll share the one I use for a 3 column layout.

floating divs

CSS:
.column{
   width:33%;
   float:left;
}
  
  <strong>HTML:</strong>
  <div class="column">content</div>
  <div class="column">content</div>

  <div class="column">content</div>

You can also look at the lab graduate 3 column wireframe if this doesn't make sense

Things to remember when floating a div

1. padding makes a div bigger so if you add 20px of padding you have to subtract that from the div width
2. your footer did not disappear, its underneath the columns you're floating (next problem)
3. floating divs left does not mean they're going to stack up onto of eachother
4. float:center; doesn't do anything

Problem

Disappearing footer

Solution

your footer isn't float, it's flat on the page. so when you float things that are above it, it slides up to the top

assuming you named your footer div 'footer', this is the CSS:
#footer{clear:both;}

cool? cool.

Problem

Horizontal navigation

Solution

Settle in, this one may be a lot of typing, but it's actually pretty simple. We use unordered lists to do navigation most of the time, and it makes things very flexible and easy to manage.

I use 2 different methods for creating horizontal navigation. This first one when I need to show a block (like the navigation on this page), and the second one if it's straight text. But they both work pretty well, so test them out and see which one you like better.

floating list items

CSS:
#nav{height:50px;}
#nav a{
   text-decoration:none;
   color:#FFF;
   font-weight:bold;
   text-align:center;
   line-height:2em;
   background: #036;
   display:block;
   padding-top:15px;
   padding-bottom:15px;
   width:100px;
}
#nav a:hover{color:#036;background: #ccc;}
#nav ul{
	list-style:none;
	margin:0;
	padding:0;
}
#nav li{float:left;}

HTML:
<div id="nav">
<ul>
   <li>home</li>

   <li>sandwich</li>
   <li>peanut butter</li>
   <li>stephen colbert</li>
</ul>

</div>

display:inline

CSS:
#global{
   text-align:center;
   position:relative;
   height:auto;
   clear:both;
}

#global ul{list-style:none;}

#global li{display:inline;line-height:1.7em;}

#global ul li a{
   text-decoration:none;
   color:#000;
   font-weight:bold;
   padding:0 15px;
}

HTML:
<div id="global">
<ul>
   <li>home</li>

   <li>sandwich</li>
   <li>peanut butter</li>
   <li>martin colbert</li>
</ul>

</div>

I'll finish this up later
_tim