Div+css implement a very simple one-row two-column page layout

css| Web page

CSS code:

. Total width of main{width:800px;/* * *
background:red;
}
. Main. col1{
float:left;/* This is the key place to allow the col1 to float to the left so that its back (right) can place other elements (other elements: can be div, picture, text, etc.) * *
width:300px;height:300px;
Background: #eee; border:1px solid #ccc;
}
. Main. col2{
float:left;/* This is the key place to let col2 also float to the left, closely followed by the col1 of the back * *
margin-left:5px;/* let col2 and col1 some spacing between the * *
width:490px;height:300px;/* to a size can be free *
Background: #ddd;
border:1px solid #ccc;
}
clear-float{clear:both}/* clears the col1 and col2 float, or the main's height will go awry without a float element inside it. */

HTML structure:

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

Effect:

<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 to let col1 float to the left, so that its back (the right) can place other elements (other elements: can be div, picture, text, etc.) */width:300px;height:300px; Background: #eee; border:1px solid #ccc; Main. col-2{float:left;/* This is the key place to let the col2 also float to the left, followed by the col1 behind */margin-left:5px;/* let col2 and col1 some interval between */width:490px;height : 300px;/* to a size can be arbitrarily */background: #ddd; border:1px solid #ccc; clear-float{clear:both}/* clears the col1 and col2 float, or the main's height will go awry without a float element inside it. */</style><div class= "Main" >main I was wrapped in the outside Div<div class= "Col-1" >col1 I'm the first column </div><div class = "Col-2" >col2 I am the second column </div><div class= "clear-float" >clear-float; I used to clear the float (clear float) </div></ Div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]