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,
- How to make jsfiddle bootstrap ready
- Horizontally Center Align tag in HTML using CSS
- reCAPTCHA Implementation Tutorial
- How to Center Align Image in Bootstrap
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- align image at middle of div element
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to place two div elements next to each other
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- How to set CSS background-Image Property
More Posts:- Share Multiple Images in WhatsApp using Android Intent - WhatsApp
- 🎃 Trending, Popular Halloween hashtags for year 2020 🎃 [Facebook, Twitter, Instagram, Snapchat] - Hashtags
- Chrome : When Adobe flash player has finished updating, reload this page to active it - Chrome
- How to recover SharePoint FARM if the SQL Server IP changes - SharePoint
- SharePoint Excel error - The workbook cannot be opened because it contains the following features that are not supported by Excel in the browser - SharePoint
- error CAML Query containing special characters - SharePoint
- 4 Open Source SQLite Editor for Mac OS X , Windows and Linux - Mac-OS-X
- Android Emulator Screenshot saved location - Android-Studio