In the last article, we learned about practical examples of float property and also created a sample website look using float and clear properties. In this article, we are going to see another way to do it using inline-block.
Let's begin...
We have already seen that it is possible to create div's that fills the width of browser and they resize accordingly when the browser resizes. We can achieve same by using inline-box value of display property.
Let's see how...
Let's begin...
We have already seen that it is possible to create div's that fills the width of browser and they resize accordingly when the browser resizes. We can achieve same by using inline-box value of display property.
Let's see how...
Without display property
#floatingElement{
float: left;
width: 100px;
height: 50px;
margin: 5px;
bordr: 2px solid black;
}
#otherElement{
clear: left;
}
Using display property
#floatingElement{
display: inline-block;
width: 100px;
height: 50px;
margin: 5px;
bordr: 2px solid black;
}
You can try, this both codes with multiple floating boxes and you will get the same output. I am keeping this as homework📝 to you...
That's all for today. Feel free to ask any doubts. In the next article, we will learn about alignments of elements using CSS in both vertical and horizontal directions.
Till then #keepCoding.
Follow @theCodingExprs
