CSS and Float


css CSS and Float Float Left

CSS Float property

This property allow you to set the element right or left and it also enable you to wrap the text,images around it. You can control the layout of page.

float left
Float right

Different Values of Float

- Right - left - inherit - none Float right

Example

<style> img { float: right; height:140px; width:170px; margin-right:20px; } </style> <div> <img src="guava.png" alt="guava"> <p> This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. </p> </div>

Float left

Example <style> img { float: left; height:140px; width:170px; margin-right:20px; } </style> <div> <img src="guava.png" alt="guava"> <p> This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. </p> </div>

Float none

Example <style> img { float: none; height:140px; width:170px; margin-right:20px; } </style> <div> <img src="guava.png" alt="guava"> <p> This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. This is guava fruit many benifits of this. </p> </div>

Clear Property

Example <style> #istdiv { float: left; height: 60px; width: 120px; margin: 8px; border: 1px solid #DC143C; } #seconddiv { border: 2px solid #0000FF; padding: 4px; } #thirdiv { float: left; height: 60px; width: 120px; margin: 15px; border: 1px solid #DC143C; } #fourthdiv { border: 2px solid #0000FF; clear: left; } </style> <h2>clear property is not use</h2> <div id="istdiv">This is first div </div> <div id="seconddiv">look that this div can collapse with istdiv even this div written after the first div in Html section </div><br><br> <h2>clear property is use</h2> <div id="thirdiv">This is third div </div> <div id="fourthdiv">Above collapsing problem remove by using <b>clear property</b> </div>
css Float Left Chapter Next »