Display two divs side by side.

Display two divs side by side.

I. Use the inline attribute of display

Html code <div style = "width: 300px; height: auto; float: left; display: inline"> AAAA </div> <div style = "width: 300px; height: auto; float: left; display: inline "> BBBB </div>View Code

2. Set float to display the Div side by side

Html code <style> 2 # left, # right {float: left; border: 1px solid red; padding: 10px ;} 3 </style> 4 <div id = "main"> 5 <div id = "left"> 1111 </div> 6 <div id = "right"> 2222 <br & gt; 2222 <br> 2222 </div> 7 <! -- If clear consistency is not required, there may be incompatibility issues with the browser. clear sets this element to have no floating elements weekly --> 8 <div style = "clear: both "> </div> 9 </div>View Code

3. For the two divs side by side, the left side is the absolute width, and the right side is the relative width. This layout is usually used, for example, the left side is the navigation page and the right side is the content page.

1. Set the maximum container padding-left to a fixed width, the position of the fixed width on the left to absolute, and the width of the right

2. Use position: absolute. The Code is as follows.

Html code <style> 2 body {margin: 0; height: 100%} 3 html {height: 100%}/* compatible with firefox div height 100% */4 # left {position: absolute; top: 0; left: 0; width: 200px; height: 100%; background-color: # CCCCCC} 5 # right {margin-left: 200px; height: 100%; background-color: # 0099FF} 6 </style> 7 <div id = "left"> left </div> 8 <div id = "right"> right </div>View Code

This code mainly involves the following two important points:

(1) compatible with firefox to achieve a div height of 100%;
(2) div is an excellent choice for absolute positioning. In the page layout, position: absolute can achieve good results if it is applied flexibly.

3. Use float to solve the Left and Right layout of the div. The left side is the absolute width and the right side is the relative width.

Html Code View Code

4. The Code is as follows. Method 3 may not comply with the requirements of the question, but can achieve the same page effect. It mainly uses the float attribute of div.

Html code <style> body {margin: 0; height: 100%} html {height: 100%}/* firefox-compatible div height 100% */# left {width: 200px; height: 100%; background-color: # CCCCCC; float: left} # main {width: 100%; height: 100%; background-color: # 0099FF }</style> <div id = "main"> <div id = "left"> left </div> Right </div>View Code