CSS setting code for one row and two columns

The code is as follows:

Copy code

<Style type = "text/css"> Body {font-size: 12px ;} . Main {width: 800px;/* total width */ Background: yellow; } . Main. col-1 { 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. col-2 { Float: left;/* This is the key place for col2 to move to the left, followed by col1 */ Margin-left: 5px;/* interval between col2 and col1 */ Width: 490px; height: 300px;/* give a random size */ Background: # ddd; Border: 1px solid # ccc; } . 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. */ </Style> <Div class = "main"> main is the div of the package. <Div class = "col-1"> col1 is the first column </div> <Div class = "col-2"> col2 is the second column </div> <Div class = "clear-float"> clear-float; I used to clear float </div> </Div>