Div + CSS layout with one row and two columns

Effect:

Main: I am the DIV with the package outside.

Col1 I'm the first column col2 I'm the second column clear-float; I used to clear float (clear float)

The following is a description:

CSS code:. Main {width: 800px;/* total width */Background: red ;}. main. col1 {float: Left;/* This is the key place for col1 to float to the left, so that other elements (other elements: div, image, text) */width: 300px; Height: 300px; Background: # Eee; Border: 1px solid # CCC ;}. main. col2 {float: Left;/* This is the key place for col2 to move to the left, followed by col1 */margin-left: 5px; /* set the interval between col2 and col1 */width: 490px; Height: 300px;/* give a dimension as needed */Background: # DDD; Border: 1px solid # CCC ;}. clear-float {clear: both}/* Clear C Float of ol1 and col2; otherwise, the height of the main will fail and there will be no float elements in it. */HTML structure:<Div class = "Main"> main <Div class = "col-1"> col1 </div> <Div class = "col-2"> col2 </div> <div class = "Clear-float"> clear-float </div>

Run codeNo coloring mode copy printing?

1. <Style type = "text/CSS">
2. Body {font-size: 12px ;}
4. . Main {width: 800px;/* total width */
5. Background: yellow;
6. }
7. . Main. col-1 {
8. Float: Left;/* This is the key place for col1 to float to the left, so that other elements (other elements: div, image, text )*/
9. Width: 300px; Height: 300px;
10. Background: # Eee; Border: 1px solid # CCC;
11. }
12. . Main. col-2 {
13. Float: Left;/* This is the key place for col2 to move to the left, followed by col1 */
14. Margin-left: 5px;/* interval between col2 and col1 */
15. Width: 490px; Height: 300px;/* give a random size */
16. Background: # DDD;
17. Border: 1px solid # CCC;
18. }
19. . Clear-float {clear: both}/* clear the float of col1 and col2. Otherwise, the height of the main will fail and there will be no float elements in it. */
20. </Style>
22. <Div class = "Main"> main is the DIV of the package.
23. <Div class = "col-1"> col1 is the first column </div>
24. <Div class = "col-2"> col2 is the second column </div>
25. <Div class = "Clear-float"> clear-float; I used to clear float </div>
26. </Div>