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
- [fix] zsh: illegal hardware instruction python TensorFlow M1/M2 Mac - zsh
- How to connect Relational and NoSQL databases with Spring Boot - HowTos
- Error code - 7: There's a more permanent way to sign in to Microsoft Teams - Teams
- How to Sync Microsoft Teams Calendar with Mac Calendar - Microsoft
- Eclipse Error : The Eclipse executable launcher was unable to locate its companion shared library. - Eclipse
- How to ignore files in git using .gitignore file - Git
- Notepad++ Replace space with Dot - NotepadPlusPlus
- java: unclosed string literal [Error] - Java