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:
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:
- 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!
- How to make jsfiddle bootstrap ready
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- iOS Fix: This app is no longer shared with you. To use it, you must buy it from the App Store. - Apple
- JavaScript date in yyyy-MM-dd format - JavaScript
- JavaScript : redirect page to other url - Android
- Maven Eclipse (M2e) No archetypes currently available - Java
- Error : Invalid key hash.The key hash does not match any stored key hashes - Android
- How to turn off Facebook autoplay videos on timeline - Facebook
- Center align text in TextView Android Programming - Android
- How to perform Find and Replace using vim Editor - vi