Code2care : TechZone Apps & Tutorials

How to place two div elements next to each other



By default, if you create two div elements in your html, they are place one below the other.

Example :

<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>


Result :

Div tag 1
Div tag 2


Now if you want the div tags to be placed next to each other, you need to add float:left css attributes to both the div elements, and surround the div's with a wrapper div.

Example :

<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>
Result :

Div tag 1
Div tag 2




Top




Posts related to html.


1. How to place two div elements next to each other

2. Align html element at the center of page vertically and horizontally

3. Remove Html head and body tags from ckeditor source

4. How to set opacity only for div background and not the text - CSS

5. How to get table td, tr or th inner content value with id or name attribute

6. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

7. Link in html without a underline

8. Adding Sub Headings to Bootstrap Header tags

9. How to make a div tag clickable

10. Top 15 Programming Languages to learn 2014-2015

11. Chessboard with pieces using pure HTML and CSS

12. Default speed of Marquee tag : SCROLLAMOUNT

13. How to make div or text in html unselectable using CSS

14. Add Animated Scrolling to Html Page Title Script

15. Fibonacci series from 1 to 500 table

    more...

Posts related to css.


1. Remove Html head and body tags from ckeditor source

2. Responsive web design using CSS Media Queries

3. Default speed of Marquee tag : SCROLLAMOUNT

4. Align html element at the center of page vertically and horizontally

5. How to make jsfiddle bootstrap ready

6. How to place two div elements next to each other

7. How to set opacity only for div background and not the text - CSS

8. How to make div or text in html unselectable using CSS

9. Chessboard with pieces using pure HTML and CSS

10. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

11. Facebook like box overlaps fixed div element while scrolling the page

    more...






Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-15