How to place two div elements next to each other

Example - Two Div 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 on 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:

Div tag 1

Div tag 2

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:

Div tag 1

Div tag 2

Comments:

Having to place two divs side by side in HTML is what I was struggling to achieve. Thank you! this helped
anon 23 Sept 2020 11:11:21 GMT
THANK YOU! THIS IS WHAT I WAS LOOKING FOR!!! Short & Sweet!
apk20 04 Aug 2020 12:08:26 GMT
Further comments disabled!

More Posts related to CSS,

More Posts: