How to place two div elements next to each other

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


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 tag 1
Div tag 2


  • 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
    apk20 04 Aug 2020 12:08:26 GMT
  • Further comments disabled!
Try Out Code2care Dev Tools:


#Android #Java #Linux #Microsoft #Google #Python #MacOS #Notepad++ #Microsoft Teams #CSS #PHP #SharePoint #Html #Linux #C-Program #Bootstrap #jQuery #Sublime #Android-Studio #Facebook #Eclipse #WhatsApp #News #MySQL #Json #HowTos #JavaScript #FTP #S3


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR -