Menu
With CSS properties, you can easily put two <div> side by side in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
Place two divs side by side using CSS Flexbox In this method, we have to first make the parent div element a flex container which we do with the help of the display property. display: flex; property on it. This will automatically place both the divs side by side.
Aligning two divs side by side horizontally, you need to add width to both divs and add display: inline-block; . Show activity on this post.
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.
Since div's by default are block elements - meaning they will occupy full available width, try using -
display:inline-block;
The div is now rendered inline i.e. does not disrupt flow of elements, but will still be treated as a block element.
I find this technique easier than wrestling with floats.
See this tutorial for more - http://learnlayout.com/inline-block.html. I would recommend even the previous articles that lead up to that one. (No, I did not write it)
#parent_div_1, #parent_div_2, #parent_div_3 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.child_div_1 {
float: left;
margin-right: 5px;
}
Check working example at http://jsfiddle.net/c6242/1/
I found the below code very useful, it might help anyone who comes searching here
<html>
<body>
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>Using flexbox it is super simple!
#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}
Fiddle example
Using the style
.child_div_1 {
float:left
}
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