Let two div display side-by

One, using the inline property of display

HTML code

1. <div style="width:300px; Height:auto; Float:left; Display:inline ">aaaa</div>
3. <div style="width:300px; Height:auto; Float:left; Display:inline ">bbbb</div>

Second, by setting float to let div display

HTML code

2. <style>
4. #left, #right {float:left;border:1px solid red; padding:10px;}
6. </style>
8. <div id= "main">
10. <div id= "left"> 1111 </div>
12. <div id= "right"> 2222 <br> 2222 <br> 2222 </ div>
14. <!--If you do not have a clear component, you may have a browser incompatibility problem, and clear this element has no floating element around--
16. <div style="Clear:both"></div>
18. </div>

Three, for two Div side-by, the left is the absolute width, the right is relative width, need to use this layout of the situation more see, such as the left for navigation, the right side of the content of the page

1, the largest container padding-left fixed width, the left fixed width of a piece of position:absolute, and then right a piece of width for hundred percent

2, use Position:absolute. The code is as follows.

HTML code

2. <style>
4. body{margin:0; height:100%}
6. html{height:100%}/* compatible with Firefox div height 100%*/
8. #left {position:absolute; top:0; left:0; width:200px; height:100%;
10. #right {margin-left:200px; height:100%;
12. </style>
14. <div id="left">left</div>
16. <div id="right">right</div>

This code mainly involves the following two points are more important:

(1) compatible with Firefox to achieve div height 100%;
(2) The magic of absolute positioning of div; When the page layout, Position:absolute if the flexible application, can achieve good results.


3. Use float to solve the div layout, left is absolute width, right is relative width problem

HTML code

2. <style type="Text/css">
4. body{margin:0; height:100%}
6. html{height:100%}
8. #left {width:150px; height:100%; float:left; _margin-right:-3px; yellow}
10. #main {height:100%; green}
12. </style>
16. <div id="left"></div>
18. <div id="main"></div>

4, the code is as follows. Method 3 may not follow the title, but can achieve the same page effect. The main use of the DIV's float property.

HTML code

2. <style>
4. body{margin:0; height:100%}
6. html{height:100%}/* compatible with Firefox div height 100%*/
8. #left {width:200px; height:100%; Float:left}
10. #main {width:100%; height:100%;
12. </style>
14. <div id="main">
16. <div id="left">left</div>
18. Right
20. </div>

Let two div display side-by