CODEWITHSUNDEEP
htmlcsscss-float
CoDINGinDARK
CoDINGinDARK

Reputation: 346

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 ?

Upvotes: 0

Views: 124

Answers (2)

Ram kumar
Ram kumar

Reputation: 3162

Please check this one http://jsfiddle.net/966naq5e/17/ I had change little bit structure and update 

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>

Upvotes: 0

Meet Parekh
Meet Parekh

Reputation: 12

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;
}

Consider this I have also reduced the margin-left because it will calculate its margin from the column1 as it is stacking over column1 after I apply floating to it.

Upvotes: 0

Related Questions