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>

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!



Recent Posts:




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, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.