DIV CSS one row and two columns layout_html/css_WEB-ITnose

CSS code:

css code
.main{width:800px;/* Total width */
background:red;
}
.main .col1{
float:left;/* This is the key point. Let col1 float to the left, so that other elements can be placed behind it (on the right) *//* (Other elements: it can be div, pictures, text, etc.) */
width:300px;height:300px;
background:#eee;border:1px solid #ccc;
}
.main .col2{
float:left;/* This is the key Where let col2 also float to the left, immediately behind col1 */
margin-left:5px;/* Let there be some space between col2 and col1 */
width:490px;height:300px;/ * Give a size as you wish*/
background:#ddd;
border:1px solid #ccc;
}
.clear-float{clear:both}/* Clear the float of col1 and col2 , otherwise the height of main will be wrong *//* It does not wrap the float elements inside it. */

HTML structure:

main
< ; div class ="col-1" > col1
col2
clear-float

Effect:

Code

main I am wrapping the div

col1 I am the first column

col2 I am the second column