What is CSS float ?
CSS float is one of the trickier CSS concept to understand. Once grasped we can build awesome websites with float based layout.
Before diving into the concept, lets understand common usage of float property.
Where it will be used?
- CSS float plays a major role in building website layouts.
- It is used in Creating image gallery
- It helps to Wrap contents Around an image, just as we see in a newspaper.
- Allows to shift a block level element to either right or left side of a page.
How it will Behave and what are its traits of floats ?
- CSS float property removes an element from the normal document flow.
Eg: float left places an element on the left most side until it reaches its parent element’s border. - To Apply float property, an element must have a fixed width, or it should be a block level element.
Let’s see the implementation.
How to write CSS Rules?
To be placed inside HEAD section of HTML
1 2 3 4 5 6 7 8 9 10 11 |
.content{ float: left; width:70%; background:#fcfcfc; min-height : 500px; padding:10px; } .sidebar { background:#fffff; padding:10px; } |
How to write HTML markup?
To be placed under BODY section.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div> <div class="content"> Main content goes here.<br> This is the content holder contains CSS rules for positioning the layout with two column in it. <br><br> <b>float</b> : which will tell the preceding block element to appear beside it. <br> <br> <code> .content{ float: left; width:70%; background:#fcfcfc; min-height : 500px; padding:10px; } </code> </div> <div class="sidebar">Sidebar content goes here. <br> <br> <code> .sidebar { background:#fffff; padding:10px; } </code> </div> </div> |
Place the above code in float_left.html file and run it in the browser.
0 Comments Leave a comment