First thing I've noticed:You have .left-column I' bet.height: 100%
This characteristic will not work if its parent does not have a certain height(s). All right, look at parent... ♪For section#container You've got a height, too. height: 100%♪ What's wrong?
A section#container They're looking at their parents, and they're parents. html and bodyYou don't have a height for them. 100%that's why the whole design won't last at all altitudes.So ask:html, body{
height: 100%;
}
Two:You use your properties.#container .content {
float: right;
}
For the main container that determines the height of the entire document, it is not necessary, so remove it, and ask it margin-left: ширина левого блокаAnd also:Exclude identifiers (#) from sss rules, use only classes./*CSS Base =================================*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, form {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;}
html, body{height: 100%}
body {color:#111; font-family: "Tahoma", sans-serif;}
input, textarea {outline:none;}
h1 {font-size:36px; font-weight: normal;}
h2 {font-size:28px; font-weight: normal;}
p {font-size:18px; line-height:20px; }
a {outline:none; text-decoration:none;}
a:hover {text-decoration: none;}
img {border:none; outline:0;}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* HEADER */
header {
width: 100%;
height: 80px;
background: #ECECEC;
position: fixed;
top: 0;
right: 0;
z-index: 10;
}
/* MAIN CONTENT */
#container {
position: relative;
width: 100%;
height: 100%;
margin-top: 80px;
}
#container .left-panel {
width: 400px;
height: 100%;
background: #CACACA;
float: left;
}
#container .content {
width: 100%;
position: relative;
margin-left: 400px;
}
#container .content .right-panel {
float: right;
width: 200px;
height: 400px;
background: #CACACA;
}
/* FOOTER */
footer {
height: 100px;
width: 100%;
background: #ECECEC;
}<header>
<h1>HEADER</h1>
</header>
<section id="container" class="clearfix">
<div class="left-panel">
<h2>left-panel</h2>
</div>
<div class="content">
<div class="right-panel">
<h2>right-panel</h2>
</div>
<h2>main content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
</div>
</section>
<footer>
<h2>footer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore dolores enim pariatur amet velit magni numquam tempore ipsam, aut dolorum impedit laborum, corporis, explicabo placeat.</p>
</footer>
