three column float fixed layout
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>3 column layout</title>
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 {
background: rgb(237, 228, 214);
height: 500px;
float:left;
width:300px;
}
.col2 {
background: rgb(219,126,64);
height: 500px;
width:300px;
margin-left:330px;
}
.col3 {
background: rgb(173, 169, 130);
height: 500px;
width:300px;
margin-left:660px;
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<section class="col2">
This is where equally important stuff goes.
</section>
<aside class="col3">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>
</body>
</html>
OR
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>3 column layout</title>
<style>
aside, article, section, header, footer, nav {
display: block;
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 {
background: rgb(237, 228, 214);
height: 500px;
float:left;
width:300px;
margin-right:30px;
}
.col2 {
background: rgb(219,126,64);
height: 500px;
width:300px;
margin-right:20px;
}
.col3 {
background: rgb(173, 169, 130);
height: 500px;
width:300px;
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
section {
display:inline-block;
}
aside {
display:inline-block;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<section class="col2">
This is where equally important stuff goes.
</section>
<aside class="col3">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>
</body>
</html>
I have a body width of 960px so divided I divided it into 3 columns each of 300px X 3 so total of 900px and margin of 30px X 2 b/w two columns total of 60px.All together it sums upto 960px.
Now I have given 1st column width of 300px and used float property,so the second boxes alligns next to it so I have given a margin of 330px that is 20px so I get the job done.So i have a space left about 330px on the right,I gave the 3rd box a margin of 660px which is 20px and width of 300px.
I want the 3rd box to sit next to second which is not happening instead it goes to second line,I know I can use float-left two second box or use a float right to 3rd box.I want to know why this method is not working tough their is space.
In the second 1 I have used aside and section as inline-block even then it works,but the problem is,I have used 300px on all three boxes which has consumed 900px [300X3=900]My 'body' width is 960px when I give margin of 30px and 30px on the right the third box moves to second line but when I used 30px and 20px it stays why is that ?
It's simple you have not made the column2 float to left so it is included in normal document flow. So it acquires the entire block space and shifts the third column below it. All you need to do is to
.col2 {
background: rgb(219,126,64);
height: 500px;
width:300px;
float: left;
margin-left:30px;
}请检查这一个http://jsfiddle.net/966naq5e/17/我改变了一点点结构和更新
aside, article, section, header, footer, nav {
display: block;
margin:0;
padding:0;
}
*{
box-sizing: border-box
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 .content{
background: rgb(237, 228, 214);
height: 500px;
}
.col2 .content{
background: rgb(219,126,64);
height: 500px;
}
.col3 .content{
background: rgb(173, 169, 130);
height: 500px;
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
section {
display:inline-block;
}
aside {
display:inline-block;
}
.container{
width: 960px;
margin: 0 auto;
}
.holder{
margin: 0 -15px;
overflow: hidden;
}
.holder .col{
width: 330px;
padding: 0 15px;
float: left;
}<div class="container">
<div class="holder">
<section class="col1 col">
<div class="content">
This is where the really important stuff goes.
</div>
</section>
<section class="col2 col">
<div class="content">This is where equally important stuff goes.</div>
</section>
<aside class="col3 col">
<div class="content"> This is where the related content goes.</div>
</aside>
</div>
</div>
<footer>Copyright stuff....</footer>上一篇: 为什么没有填充
下一篇: 三列浮动固定布局