Menu
Three or more different div can be put side-by-side using CSS in the same div. This can be achieved with flexbox – but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work. Use CSS property to set the height and width of div.
(You'll see why in a bit.) To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
Just give them a width and float: left;, here's an example:
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
The modern way is to use the CSS flexbox, see support tables.
.container {
display: flex;
}
.container > div {
flex: 1; /*grow*/
}<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>You can also use CSS grid, see support tables.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>It is same way as you do for the two divs, just float the third one to left or right too.
<style>
.left{float:left; width:33%;}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
float them all left
make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap
<br style="clear: left;" />
that code that someone posted up there, it did the trick!!! when i paste it just before closing the Container DIV, it helps clear all subsequent DIVs from overlapping with the DIVs i've created side-by-side at the top!
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
tadaa!! :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With