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 create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- How to find current logged-in user in Linux Terminal - Linux
- bash: ls command to see list files in current directory all subdirectories - Bash
- Run only a Single Unit Test using Gradle - Gradle
- [Fix] Steam Friends Network Unreachable Error - HowTos
- How to make use of SQLite Module in Python? - Python
- How to turn off Dark Mode in Excel App for Mac - Windows
- How to show console in Eclipse IDE - Eclipse
- Fix Power BI 404 not found error when connecting SharePoint Online List as Data Source - SharePoint