float css – one of various CSS properties
Today I will tell you about CSS. This is will property called ‘float’. This property already in CSS since first version. And of course supporting of all possible browsers – Firefox, IE, Safari, Opera etc.
By default, all basic HTML elements floating from left to right as possible. If the item reaches the end of the page (or the boundaries of its parent element), it goes lower – to next line.
Of course, we can play with these rules via float css attribute.
‘float’ property has the following possible values:
- none – default value. Mean that no special float riles will applied. Without floating.
- left – element will floats to left side.
- right – element will floats to right side
- inherit – element will take float value from its parent. This is rare using property, just because seems it not supported in IE.
Here are few samples of using float with css
Sample 1 – we will position several elements with float value = left. Sample code you will see below too
div{
float:left;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}
<div class='left'>Element 1</div> <div class='left'>Element 2</div> <div class='left'>Element 3</div> <div class='left'>Element 4</div> <div class='left'>Element 5</div> <div class='left'>Element 6</div> <div class='left'>Element 7</div> <div class='left'>Element 8</div> <div class='left'>Element 9</div> <div class='left'>Element 10</div>
Sample 2 – lets change float to right
Interesting, isn`t it? all elements now floating to right, and if no room – drop to next line, again to right side.
Sample 3 – none value
div{
float:none;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}
Yes, note few next rules: all other elements which follow after floating element will flow around it, and all elements which was before floating element will not be changed.
Also, quite forget, during playing with that float css property, you will noticing that all following elements will affected with this property too. It will looks like this:
Not good, isn`t it? We expect that this block should appear after our first parent, but instead – its appear in wrong place and it mess layout.
Full its code was:
#sample1{width:560px;
border:1px dashed #888;
margin:5px;
padding:5px
}
#sample1 div.left{
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
float:left
}
<div id="sample1">
<div class='left'>Element 1</div>
<div class='left'>Element 2</div>
<div class='left'>Element 3</div>
<div class='left'>Element 4</div>
<div class='left'>Element 5</div>
<div class='left'>Element 6</div>
<div class='left'>Element 7</div>
<div class='left'>Element 8</div>
<div class='left'>Element 9</div>
<div class='left'>Element 10</div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>
So how we can fix this? – Easy, we will using ‘clear’ property. Here are fixed version:
And its sources here:
<div id="sample1">
<div class='left'>Element 1</div>
<div class='left'>Element 2</div>
<div class='left'>Element 3</div>
<div class='left'>Element 4</div>
<div class='left'>Element 5</div>
<div class='left'>Element 6</div>
<div class='left'>Element 7</div>
<div class='left'>Element 8</div>
<div class='left'>Element 9</div>
<div class='left'>Element 10</div>
<div style="clear:both"></div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>
Conclusion
I hope that our new article was very useful for your projects. Good luck!
Web Developer and Module Developer for online web applications. Have great experience with Dolphin CMS. |
float css – one of various CSS properties…
CSS tutorial, telling about float css property. Short and good explanation….
[...] This post was mentioned on Twitter by riloBuzz, Ayaz Malik. Ayaz Malik said: float css – one of various #CSS properties http://t.co/rGvnYvJ [...]
[...] float css – one of various CSS properties Share and [...]
[...] here to read the rest: float css – one of various CSS properties Related Posts:Bear, Diah and Pasha: No float:center in CSS Nope, I am talking about the CSS float [...]
[...] More here: float css – one of various CSS properties – Scripts Tutorials [...]
[...] float css – one of various CSS properties [...]
[...] float css – one of various CSS properties [...]
why dont u just use overflow:hidden
Yes, this is possible too, but as I noticed, most of guys using clear:both property