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:

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 div's 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!