DIV footers don't match

Question

So this is what I'm trying to create. I have it in code, and it looks kinda of ok. But the div footers won't match. Layout draft

My code:

body {
 font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
 background: #42413C;
 margin: 0;
 padding: 0;
 color: #000;
}


.container {
 width: 100%;
 height: 100%
 background: #FFF;
 margin: 0 auto; 
}

.content ul, .content ol { 
 padding: 0 15px 15px 40px; 
}


.footer {
 padding: 10px 0;
 background: #CCC49F;
 position: relative;
}

.header {
 width: 100%;
 height: 100px;
 background: #ADB96E;
}

.sidebar1 {
 width: 20%;
 height: 1000px;
 float: left;
 background: #EADCAE;
 padding-bottom: 10px;
}

.sidebar2 {
 width: 10%;
 height: 950px;
 float: left;
 background: #EADCAE;
 padding-bottom: 10px;
}

.content {
 float:left;
 padding: 10px 0;
 width: 70%;
 height: 950px;
 float: left;
 background: #CF3
}

.Hybrid {
 float:left;
 padding: 10px 0;
 width: 10%;
 height: 50px;
 float: left;
 background: #CCC49F
}

.menu {
 float:left;
 padding: 10px 0;
 width: 70%;
 height: 50px;
 float: left;
 background: #CCC49F
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

 <div class="container">
  <div class="header">HEADER<!-- end .header --></div>
   <div class="sidebar1">SIDEbar<!-- end .sidebar1 --></div>
   <div class="Hybrid">Hybrid</div>
      <div class="menu">Menu</div>
      <div class="sidebar2">SCHEEF<!-- end .sidebar1 --></div>
        
        <div class="content">content</div>
   <div class="footer">Footer<!-- end .footer --></div>
   <!-- end .container --></div>
</body>
</html>

Just don't seem to find the thing I did wrong. I think it's just something stupid I just don't see.

Add `clear: both;` to `.footer` so that it will clear the floated `div`s. — Hidden Hobbes, Jan 11 '16 at 14:03
Are you sure that you're showing us right layout draft (in link)? . Becouse you markup is quite different than it. — RysQ, Jan 11 '16 at 14:17
On a side note, any reason not to use HTML5? Also, I would advice to use the `id` attribute rather than `class` for those elements. Or will there be a second `sidebar1`, for example? — domsson, Jan 11 '16 at 14:22
@domdom Current practice is **not** to use an ID unless required. Classes are the preferred method. — Paulie_D, Jan 11 '16 at 14:45
You say footers but there is only one footer. You also say they don't match but what do you mean by that? — Rob, Jan 11 '16 at 14:45
@Paulie_D wow, I didn't know that. Could you hint me to a source with some reasoning? — domsson, Jan 11 '16 at 14:46
Sure - http://stackoverflow.com/questions/8084555/why-selecting-by-id-is-not-recommended-in-css — Paulie_D, Jan 11 '16 at 14:48
@Paulie_D I see, but I actually agree with the second highest voted answer to that question, which basically recommends to use IDs for structural elements just like in OPs markup. Also, it all seems to come down to CSSLint's opinion, I don't really see how that is current practice. — domsson, Jan 11 '16 at 14:54
No no reason not to use HTML5. I just stick by what I think I know. In my markup the .Hybrid was something I tried last night. Forgot to remove it. The idea was to create a blank div above .sidbar2 next to the menu. — cd_BE, Jan 11 '16 at 14:54
@Rob I ment the footers of each div. Or the bottom if you will. The bottom of each div had the same height but they did't match at the bottom so that the footer was directly under de div sidebar1, sidebar2 and content. — cd_BE, Jan 11 '16 at 14:58

score 1 · Accepted Answer · answered Jan 11 '16 at 14:39

1

In my opinion your markup is wrong to get the layout from your picture.

Check this: https://jsfiddle.net/yotz6r4h/2/

html

<div class="header">header</div>

<div class="main">

  <div class="sidebar1">
    sidebar1
  </div>

  <div class="wrapper">

    <div class="menu">
      menu
    </div>

    <div class="sidebar2">
      sidebar2
    </div>

    <div class="content">
      content
    </div>

  </div>

</div>

<div class="footer">footer</div>

css

.header {
    width: 100%;
    height: 100px;
    background: #ADB96E;
}

.main:after {
  content: "";
  display: table;
  clear: both;
}

.sidebar1 {
    width: 20%;
    height: 1000px;
    float: left;
    background: #EADCAE;
    padding-bottom: 10px;
}

.wrapper {
  width: 80%;
  float: left;
  height: 1000px;
  padding-bottom: 10px;
}

.menu {
    padding: 10px 0;
    height: 50px;
    background: #CCC49F;
}

.sidebar2 {
    width: 10%;
    height: 930px;
    float: left;
    background: #aaa;
    padding-bottom: 10px;
}

.content {
  width: 90%;
  float: left;
  background: #CF3;
  height: 940px;
}

.footer {
    padding: 10px 0;
    background: #CCC49F;
}

answered Jan 11 '16 at 14:39

RysQ

347
3
14

Looks like what I was trying to get. only one white border all round that need to go and I got it. – cd_BE Jan 11 '16 at 14:52
The "border" is actually the `body` margin. Just add `body {margin: 0; padding: 0}` :) – RysQ Jan 11 '16 at 14:58
Just did that. Currently analyzing my wrong code with yours. Want to know what I did wrong. You learn from you mistakes and from stack overflow top peeps! – cd_BE Jan 11 '16 at 15:01
In this case the problem lay in the fact that insted of puting divs next to each other in your code, some tags should be nested in a parent container: Mid content betwen `header` and `footer` should be nested in some container - and this container need to be separated from footer by some clearfix. `menu`, `sidebar2`,`content` should be also nested in container which separates them from the `sidebar1` – RysQ Jan 11 '16 at 15:17

score 1 · Answer 2 · answered Jan 11 '16 at 14:44

Nested Flexbox can do that.

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  min-height: 100%;
}
.wrapper {
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
header,
footer {
  height: 75px;
  background: #c0ffee;
}
.inner-wrap-one {
  flex: 1;
  display: flex;
}
.sidebar-1 {
  background: #663399;
  color: white;
  flex: 0 0 10%;
}
.inner-wrap-two {
  flex: 1;
  background: plum;
  display: flex;
  flex-direction: column;
}
nav {
  height: 75px;
  background: #bada55;
}
main {
  display: flex;
  flex: 1;
}
.sidebar-2 {
  background: green;
  flex: 0 0 10%;
  color: white;
}
.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: grey;
  color: white;
}

<div class="wrapper">
  <header>HEADER</header>
  <div class="inner-wrap-one">
    <aside class="sidebar-1">SIDEBAR 1</aside>
    <div class="inner-wrap-two">
      <nav>NAVIGATION</nav>
      <main>
        <aside class="sidebar-2">SIDEBAR 2</aside>
        <div class="content">CONTENT</div>
      </main>
    </div>
  </div>
  <footer>FOOTER</footer>
</div>

Codepen Demo

Not having done much web stuff in a while, I actually didn't know about the flexbox stuff yet. +1 for making me aware of it! However, browser support might be worth mentioning. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes), this might currently limit the application (IE 11+). — domsson, Jan 11 '16 at 15:13

score 0 · Answer 3 · answered Jan 11 '16 at 14:25

i think your problem in floating, but you can try the following css code its work fine.

body{
  margin: 0px
}

.header{
  background: #fff222;
  height: 100px;
}

.sidebar1 {
  width: 20%; 
  background: #000;
  color: #fff;
  height: 550px;
  display: inline-block;
  float: left;
  
}

.Hybrid{
  width: 20%;
  float:left;
  background: green;
  display: inline-block;
  height: 50px;
}

.menu {
  background: #222fff;
  color: #fff;
  display: inline-block;
  width: 60%;
  height: 50px
}

.content{
  background: #5efff0;
    height:500px;
  float:left;
  width:60%
}

.sidebar2{
  background: #ff22aa;
  display:inline-block;
  float:left;
  width: 20%;
  height:500px;
}

.footer{
  width: 100%;
  height: 100px;
  background: #111fff;
  float: left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

 <div class="container">
  <div class="header">HEADER<!-- end .header --></div>
   <div class="sidebar1">SIDEbar<!-- end .sidebar1 --></div>
   <div class="Hybrid">Hybrid</div>
      <div class="menu">Menu</div>
      <div class="sidebar2">SCHEEF<!-- end .sidebar1 --></div>
        
        <div class="content">content</div>
   <div class="footer">Footer<!-- end .footer --></div>
   <!-- end .container --></div>
</body>
</html>

score 0 · Answer 4 · answered Jan 11 '16 at 15:07

Others have already give answers that fix your original problem. I just wanted to quickly show you how your markup could benefit from using HTML5. First, your DOCTYPE and head would look like this:

<!DOCTYPE html> <!-- isn't that easy to remember? -->
<html> <!-- no additional attribute required -->
    <head>
        <meta charset="UTF-8"> <!-- nice and simple -->
        <title>SCHEEF</title>
    </head>
<!-- ... -->

Second, you could replace some of those generic div containers with more semantic elements:

<!-- ... -->
    <body>
        <header>Header</header>
        <aside id="sidebar1">Sidebar1</aside>
        <main>
            <nav>Menu</nav>
            <aside id="sidebar2">Sidebar2</aside>
            <div id="content">Content</div>
        </main>
        <footer>Footer</footer>
    </body>
</html>

Depending on your contents, you could even replace the #content div with a section or article element (probably the first).

And that's pretty much all there is to it! You might want to give it a try.

DIV footers don't match

4 Answers4