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:- Add Text at Start and End of Each Line Notepad++ - NotepadPlusPlus
- How to Comment out Code in PowerShell Script - Powershell
- How to make a Android button act as a toggle button - Android
- How to add hours and minutes to Java Instant - Java
- PHP 301 Redirect Permanently - PHP
- Round Number up to 2 decimal places in Python - Python
- Accept Only 0-9 Numbers RegEx Example - HowTos
- Take input argument from command line in Python Programming - Python