Two DIVs side by side with CSS properties - HTML tag & code practical example for blog
Do you want to place two DIVs side by side, horizontally? We can easily do this by setting CSS properties in HTML.
This feature is very useful when we divide the area into two horizontally and to put different contents in each area. By doing so, we can set up different properties for each area. If you follow the example below, you can do it easily.
Example 1 : 2 DIVs, default
<div style="width:150px; height:100px; border:1px solid red;">
Contents here .......
.....................
.....................
</div>
<div style="width:150px; height:100px; border:1px solid blue;">
Contents here .......
.....................
.....................
</div>
Actual results:
Example 2 : 2 DIVs, next to each other
=> float: left
<div style="float: left; width:150px; height:150px; border:1px solid red;">
Contents here .......
.....................
.....................
</div>
<div style="float: left; width:150px; height:150px; border:1px solid blue;">
Contents here .......
.....................
.....................
</div>
Actual results:
Example 3 : 2 DIVs, one on the left and the other on the right
=> float: left, float: right
<div style="float: left; width:150px; height:150px; border:1px solid red;">
Contents here .......
.....................
.....................
</div>
<div style="float: right; width:150px; height:150px; border:1px solid blue;">
Contents here .......
.....................
.....................
</div>
Actual results:
The example on this page is not theoretical but practical. We sometimes
experience the difference between theory and practice in running our
homepage or blog. Theories are needed to solve problems, but practical
solutions are more important. This page is for that.
This feature is very useful when we divide the area into two horizontally and to put different contents in each area. By doing so, we can set up different properties for each area. If you follow the example below, you can do it easily.
Example 1 : 2 DIVs, default
<div style="width:150px; height:100px; border:1px solid red;">
Contents here .......
.....................
.....................
</div>
<div style="width:150px; height:100px; border:1px solid blue;">
Contents here .......
.....................
.....................
</div>
Actual results:
Contents here .......
.....................
.....................
Contents here .......
.....................
.....................
Example 2 : 2 DIVs, next to each other
=> float: left
<div style="float: left; width:150px; height:150px; border:1px solid red;">
Contents here .......
.....................
.....................
</div>
<div style="float: left; width:150px; height:150px; border:1px solid blue;">
Contents here .......
.....................
.....................
</div>
Actual results:
Contents here .......
.....................
.....................
Contents here .......
.....................
.....................
Example 3 : 2 DIVs, one on the left and the other on the right
=> float: left, float: right
<div style="float: left; width:150px; height:150px; border:1px solid red;">
Contents here .......
.....................
.....................
</div>
<div style="float: right; width:150px; height:150px; border:1px solid blue;">
Contents here .......
.....................
.....................
</div>
Actual results:
Contents here .......
.....................
.....................
Contents here .......
.....................
.....................
