How to place two div elements next to each other

By default, if you create two div elements in HTML code, they are placed one below the other. If you want to place them next to each other you would require to use a CSS property float.

✏️ Syntax: float: left | right | none | inherit

As the name goes the float property specifies how an element should float in the webpage the left or the right!.

Values that a float property can have areas below,

• left - The element will float left w.r.t to its container
• right - The element will float right w.r.t to its container
• none - This is the default behavior.
• inherit - The element will inherit parent float property value.

Let's see an example: We create two div's next to each other without float property

<div id="div1" style="padding:20px;background-color:#decddd">Div tag 1</div>
<div id="div2" style="padding:20px;background-color:#cedddd">Div tag 2</div>

Output:

Now lets use float property,

<div id="wrapperDiv">
<div id="div1" style="padding:20px;background-color:#decddd;float:left">Div tag 1</div>
<div id="div2" style="padding:20px;background-color:#cedddd;float:left">Div tag 2</div>
</div>

Output:

Comments: