Rayhan’s blog (raynux.com)

Most of the time I forget what I did to solve a problem in the past. So I have decided to do some shorthand documentation.

This is how I solve a very tricky problem when working with css in layout designing. I add the following css rules in my style file.

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* row can be in any place */
.row{
	clear: both;
	margin-bottom: .3em;
}
.row:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .row {height: 1%;}
/* End hide from IE-mac */
.column{
	float: left;	
	padding: 0;
	margin: 0;
	margin-right: 15px;
	padding-right: 0;
}
.last{
	margin-right:0;
	padding-right:0;
}

Then I add the simple row, and column class to the html elements to get the work done. like

        <div class="row">
            <h2>Header</h2>
        </div>
        <div class="row">
            <div class="column">Home</div>
            <div class="column">Services</div>
            <div class="column">Products</div>
            <div class="column last">News</div>
        </div>
        <div class="row">
            <h2>Content</h2>
            <div class="column">Body Column 1</div>
            <div class="column">Body Column 2
                <div class="column row">
                    <div class="column">
                        Nested Body Column 1
                    </div>
                    <div class="column last">
                        Nested Body Column 2
                    </div>
                </div>
            </div>
            <div class="column last">Body Column 3</div>
        </div>        
        <div class="row">
            <div class="column">Footer Text</div>
            <div class="column last">Copyright text</div>
        </div>