Rayhan’s blog (raynux.com)

Rayhan’s Personal Web Blog Site

Entries Comments


Painless css layout implementation with float clearfix tweaking.

24 June, 2008 (13:36) | CSS, HTML, Reference

Tags: , ,


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>
    

«

  »

Comments

Pingback from Recent Faves Tagged With “clearfix” : MyNetFaves
Time: May 18, 2009, 10:20 pm

[...] saved by iluvlivapool | 3 days ago CSS Tricks First saved by Kitty12843 | 4 days ago Painless css layout implementation with float clearfix tweaking. First saved by tehamandar | 7 days ago Clearfix as mixin First saved by welrbraga | 17 days [...]

Write a comment