[css]
#nav1-container,#nav2-container{background:#dbdbdb;border:0}
.navigation{margin-left:5px}
.navigation li a{background:none!important}
.navigation li a:hover{background:#EEE}

/* For rounded corners*/
#footer-ad-container{padding:8px 0}
#nav1-container {    -moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;padding: 4px 0}
#nav2-container {    -moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;padding:4px 0}
[/css]

This is what we are going to create. (Click to enlarge)

View DEMO

SWIFT uses 960.gs 16 grid CSS framework (Don’t worry if you never heard of it). Every grid cell has a margin: 0 10px. This creates a gutter of 20px. When creating a row, the total width of all elements add up to 960. Each grid cell has a class that specifies what width it will be. Here is the break down of column widths for a 16 column grid.

1. 40px
2. 100px
3. 160px
4. 220px
5. 280px
6. 340px
7. 400px
8. 460px
9. 520px
10. 580px
11. 640px
12. 700px
13. 760px
14. 820px
15. 880px
16. 940px

Each width corresponds to a class name formed like this: grid_X where X is a number from the above list. If you want a block with width 940 use class grid_16.

Mock up of our layout

After checking out the visual, you should understand how to create the mock up grid.

• Create a new page, and select “Full Width Blank” template in page attributes on the right.
• Switch the editor to HTML mode.
• Using the widths, match up the class number’s from the list and create a skeleton code as shown below in the editor.
• Once you add the skeleton code, you can go back to visual editor mode and add content to each div like you normally do. Just make sure your images dont over flow.

WYSIWYG editor can be pain in the **** some times, it uses it’s brain and removes/modifies our skeleton, be aware of that. If your comfortable with html mode, create your pages in HTML mode.

Remember to add the clearing div at the end of each row.

[css]<!–First row–>
<div class="grid_11 alpha">
</div>
<div class="grid_5 omega">
</div>
<div class="clear"></div>

<!–<span class="hiddenSpellError" pre="">Seocnd</span> row–>

<div class="grid_9 alpha">
</div>
<div class="grid_7 omega">
</div>
<div class="clear"></div>

<!–Third row–>
<div class="grid_6 alpha">
</div>
<div class="grid_5">
</div>
<div class="grid_5 omega">
</div>
<div class="clear"></div>

[/css]

Now fill in the empty div’s with the html code, make sure you close all the divs.

Skeleton code should be added in HTML mode, not in visual mode.

I added style sheet to WordPress editor in version 5.67 , your posts when published look exactly same as they looked in the editor. To take advantage of this feature switch to full screen mode while editing, if you are not comfortable with full screen mode, at least make sure your editor is more than 960px wide

This is how you editor looks in visual mode after you add the skeleton code.

I added borders to the div’s to serve as visual guide, they wont be there when on published post.

Things to remember

• First and last div of a row should have the class alpha and omega respectively.
• Don’t forget to add <div class=”clear”></div> afer each row.
• Sum of all grid indexes in a row should be 16 like we have 11+5, 9+7, 6+5+5 in the above code.

You can have sub grids to, for example

[css]
<div class="grid_10">
You can add some content here if you want to
<div class="grid_3 alpha">
</div>
<div class="grid_2">
</div>
<div class="grid_2 omega">
</div>
<div class="clear"></div>
[/css]

Sub grids index should add up to the parent grid’s index, 10 in this case. first div should have the class alpha and the last should have class omega.Don’t forget to add <div class=”clear”></div>

Further reading..
http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/

This is from where I learnt how to use 960.gs grid, this is the tutorial is one of the major factor that led to the development of SWIFT.

Floated image flowing out of the container DIV

A simple way to solve this problem of height is to add this piece of code to your style sheet, and apply the clearfix class to the div containing floated elements.

[css]

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

[/css]

The result of applying the clearfix class to the container div is shown below.

Now Donald is with in the container DIV, Cool !!

More info about similar fixes can be found at pageAffairs
Explaining this clearfix fix for div’s containing floated is not the main purpose of writing this post, now that you know about this fix lets see how to solve the problem on which I was stuck for 2 days .

Problem

A div containing list elements with display:inline; property will not take the height equal to the height of the list element.

I have the following CSS and HTML code

CSS

[css]

#nav1-container,
#nav2-container{background:#ff0;}
#nav1-container {border-bottom:solid 5px #f00;}
#nav2-container {border-top:solid 5px #f00}
ul.navigation {margin-left:-10px;}
ul.navigation li {display:inline;padding:.5em 1em;}
ul.navigation li:hover {background:#000}

[/css]

HTML

[html]
<div id="nav1-container">
<div id="nav1" class="grid_16">

<ul class="navigation top">
<li class="page_item current_page_item first"><a href="http://swiftthemes.com/swiftTest">Home</a></li>
<li class="page_item page-item-2"><a href="http://swiftthemes.com/swiftTest/?page_id=2" title="About">About</a></li>
</ul>

</div><!–/nav1–>

</div><!–/nav1-container–>

<div id="header-container">
<div id="header" class="grid_16">

<div id="logo">
<h2 class="blogname"><a href="http://swiftthemes.com/swiftTest/">SwiftTheme Test Blog</a></h2>
<h2 class="blog-title">Just another WordPress weblog</h2>
</div><!–/logo–>

<div id="header-ad">

</div><!–/header-ad"–>

</div><!–/header–>
</div><!–/header-container–>

<div id="nav2-container">
<div id="nav2" class="grid_16">
<ul class="navigation bottom">
<li class="page_item current_page_item first"><a href="http://swiftthemes.com/swiftTest">Home</a></li>
<li class="page_item page-item-2"><a href="http://swiftthemes.com/swiftTest/?page_id=2" title="About">About</a></li>

</ul>
</div><!–/nav2–>
</div><!–/nav2-container–>

[/html]

No matter what the padding of list elements be, the height of container div wouldnt change. Hard coding the height of containers is not an option for me as SWIFT will be used by lot of users, and some may have one row of links and others may 2 or 3 rows.

{ Problem with the height of inline list elements } You can see the home link flowing out of the container.

After trying different approaches to solve this problem, I finally realized that the display inline attribute is the culprit, so I removed the display:inline attribute and floated the list elements (li’s) towards left and used the clearfix class for the container and I finally got it the way I wanted it to look.

Here is what I exactly did..

Changed this

[css]ul.navigation li {display:inline;padding:.5em 1em;}[/css]

to

[css]ul.navigation li {float:left;padding:.5em 1em;}[/css]

and added clear fix class to both the containers

Changed

[html]<div id="nav1-container">[/html]

to

[html]<div id="nav1-container" class="clearfix">[/html]

and the result is shown below

See the home link after the fix.

PS

• This problem delayed the release of SWIFT by 2 days.
• Above code is from the v5.0 of SWIFT, isn’t that code poetry??