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:

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

Effect:

Code

main I am wrapping the div

col1 I am the first column

col2 I am the second column

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn