Floated Tableless Layout
Can anyone tell me how to execute开发者_开发知识库 this layout with floats and clears? Ive been trying for 2 days with total failure
Should be pretty simple, it's a basic 2 column layout with a header.
Something like this should work fine:
<div id="container">
<div id="header">1</div>
<div id="column1">
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="column2">
<div>5</div>
<div>6</div>
</div>
</div>
And some basic CSS
#column1, #column2{
width:45%;
float:left;
}
I've put a quick example here: http://jsfiddle.net/9DfRg/
of course there are many solutions. One could be the following:
html
<div id="wrapper">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>
<div id="six">Six</div>
</div>
css
#wrapper {
width:960px;
}
#one {
width:100%;
height:100px;
background:#0C9;
}
#two, #three, #four, #five, #six {
width:480px;
}
#two, #four, #six {
float:left;
height:100px;
}
#three, #five {
float:right;
}
#three {
height:200px;
}
#five {
height:150px;
}
#two {
background:#06F;
}
#three {
background:#093;
}
#four {
background:#699;
}
#five {
background:#F06;
}
#six {
background:#666;
}
live example: http://jsbin.com/iquyu5
精彩评论