Css border stops halfway

Hi All
I’m obviously making a basic mistake. All I want to do, for the moment, is put a border round my container div. I can’t make the border go all the way down to beneath my footer, as you can see from my test page at
http://www.hollywoodsgoldenage.com/testresp1.html.

My relevant CSS is:

  body {
  background: #fff;
  color: #000;
  font-family:"Helvetica", "Arial";
  font-size:87.5%;
  line-height:1.5;
  text-align:left;
}


#container{
  margin:0 auto;
  max-width:980px;
  width:96%;
  background:#fff2c4; 
   border: solid 2px #000;
     border-radius:6px;
}
header {
  padding: 10px 5px 5px 5px;
  background:#000;
  border-radius:6px;
    height:auto;
     width:94%;
      margin:auto;
}

#nav {     background-color:#FEE680;
        width:100%;    
        border-bottom:1px solid #7E7567;    
        font-family:Verdana, sans-serif;
        list-style: none;
                overflow:hidden;
                border-radius:6px;
    }        

#topcontent {
  text-align:center;
 width:90%;
 margin:0 auto 5px;
 background:#fff;
}

.left-col{
 width:60%;
 float:left;
 margin-top:0;
  margin-bottom:8%;
 border-radius:6px; 
}

.sidebar{
 width:38%;
 float:right;
 margin-top:0;
  margin-bottom:3%;
 border-radius:6px; 
}
footer {
  background-color:#FEE680;
   border-radius:50px;
     text-align:center;
      float:left;
      width:90%;
        margin-bottom:2%;
}

If anyone can spot what I’m doing wrong I’d be most grateful.
Many thanks,

Chris

#container needs overflow:hidden; or another containing mechanism.

http://www.codefundamentals.com/blog/clearing-and-containing-floats

Yes that’s solved it! My grateful thanks to you Ryan.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.