The previous lesson of html lessons series was about html form elements. This lesson mainly focuses on the float property of css.
Css Float Property
The css float property is very important for the positioning of html elements in a web page. The css float property is mostly applied to a div element. We can either apply a float left or a float right property to a div element. If we apply float left property to a div it will remain on the left side of the webpage i.e
<div style="background:black;width:400px;height:200px;float:left;">
</div>
Similarly if we apply the float right property to a div it will appear on the right side of the web page i.e
<div style="background:black;width:400px;height:200px;float:right;">
</div>
What if we have multiple divs with float properties?
Let us say we have 2 div elements with no float properties applied i.e
<div style="background:black;width:400px;height:200px;"></div>
<div style="background:red;width:400px;height:200px;"></div>
The two div elements will appear one above the other. If we want the div elements to appear side by side, we will have to apply either float left or float right property to both of the div elements i.e
<div style="background:black;width:400px;height:200px;float:left;"></div>
<div style="background:red;width:400px;height:200px;float:left;"></div>
Remember float is a tricky property if you apply the float property to just 1 div and leave the other without float property applied, the results will be different then.
Parent div of the floated child divs
If we have a parent div which contains 2 child divs with no float property and we apply border to the parent div, we will see the parent div enclosing the child divs inside it's borders i.e
<div style="border:1px solid black;padding:10px;width:400px;">
<div style="background:black;width:400px;height:200px;"></div>
<div style="background:red;width:400px;height:200px;"></div>
</div>
What if we apply the float property to the child divs and the not parent div? You will see that the parent will not enclose the child divs inside it's borders now i.e
<div style="border:1px solid black;padding:10px;width:400px;">
<div style="background:black;width:400px;height:200px;float:left;"></div>
<div style="background:red;width:400px;height:200px;float:left;"></div>
</div>
This is because the parent div does not know that the child divs are floated and it will enclose them only when it is told to treat the child divs as floated. We can tell the parent div to treat the child divs as floated by applying the overflow hidden property or the float property to the parent div.
<div style="border:1px solid black;padding:10px;width:400px;overflow:hidden;">
<div style="background:black;width:400px;height:200px;"></div>
<div style="background:red;width:400px;height:200px;"></div>
</div>
Related Posts
Css Float Property
The css float property is very important for the positioning of html elements in a web page. The css float property is mostly applied to a div element. We can either apply a float left or a float right property to a div element. If we apply float left property to a div it will remain on the left side of the webpage i.e
<div style="background:black;width:400px;height:200px;float:left;">
</div>
Similarly if we apply the float right property to a div it will appear on the right side of the web page i.e
<div style="background:black;width:400px;height:200px;float:right;">
</div>
What if we have multiple divs with float properties?
Let us say we have 2 div elements with no float properties applied i.e
<div style="background:black;width:400px;height:200px;"></div>
<div style="background:red;width:400px;height:200px;"></div>
The two div elements will appear one above the other. If we want the div elements to appear side by side, we will have to apply either float left or float right property to both of the div elements i.e
<div style="background:black;width:400px;height:200px;float:left;"></div>
<div style="background:red;width:400px;height:200px;float:left;"></div>
Remember float is a tricky property if you apply the float property to just 1 div and leave the other without float property applied, the results will be different then.
Parent div of the floated child divs
If we have a parent div which contains 2 child divs with no float property and we apply border to the parent div, we will see the parent div enclosing the child divs inside it's borders i.e
<div style="border:1px solid black;padding:10px;width:400px;">
<div style="background:black;width:400px;height:200px;"></div>
<div style="background:red;width:400px;height:200px;"></div>
</div>
What if we apply the float property to the child divs and the not parent div? You will see that the parent will not enclose the child divs inside it's borders now i.e
<div style="border:1px solid black;padding:10px;width:400px;">
<div style="background:black;width:400px;height:200px;float:left;"></div>
<div style="background:red;width:400px;height:200px;float:left;"></div>
</div>
This is because the parent div does not know that the child divs are floated and it will enclose them only when it is told to treat the child divs as floated. We can tell the parent div to treat the child divs as floated by applying the overflow hidden property or the float property to the parent div.
<div style="border:1px solid black;padding:10px;width:400px;overflow:hidden;">
<div style="background:black;width:400px;height:200px;"></div>
<div style="background:red;width:400px;height:200px;"></div>
</div>
Css Margin and Padding Properties
Important Css Properties
Types of Css
Making Navigation menus using unordered lists
No comments:
Post a Comment