Question

I’ve been working on website recently and have come across a major problem :http://jimbob.webatu.com/index.html(you’ll need to see the coding on the webpage).I’ve set my website up so that there are two main columns but are centered into the middle.The id wrap is what centers everything together and the two columns float left or right:

     #wrap    {
     width:750px;
     margin:0 auto;
     background-color:#6E6E6E;
     border-left:3px solid #A9E2F3;
     border-right:3px solid #A9E2F3;
     }
     #main    {
     float:left;
     width:496px;
     background:white;
     border-top-right-radius:5px 5px;
     border-bottom-right-radius:5px 5px;
     }
     #sidebar {
     float:right;
     width:250px;
     } `

Recently though i tried to add a footer bar like with the navigation bar at the top. this has been set to stay in the warp overall by using “clear:both” and have been trying to make it avoid the “wrap” id altogether.However something has gone wrong and the div’s that control the “wrap”and “secondborder” won’t fully close. Also as you may see a gray bar has appeared behind and the “wrap”background won’t apply(I’ve set the sidebar background to nothing so that the “wrap” background applies to it. This makes it look a bit neater).I cannot paste the required coding as there is too scattered and is too long(look at the page source on the webpage).
Can anyone provide a solution to the “wrap” background and the “footer” not centering? I have only been learning html and coding for the past 3 months so please forgive me if this is a stupid mistake I’ve made. The link again to my website where the problem is : http://jimbob.webatu.com/index.html

Answer 1

Add the overflow: hidden; to your #wrap as such

#wrap {
    width: 750px;
    margin: 0 auto;
    background-color: #6E6E6E;
    border-left: 3px solid #A9E2F3;
    border-right: 3px solid #A9E2F3;
    height: auto;
    overflow: hidden;
    }

In order for your #footer to act like a footer at the bottom of your page you will have to take it out of your #sidebar and place it after the closing for #sidebar. This should fix your problems.

To fix the #sidebar being cut off you need to float it left as opposed to right as suc,

#sidebar {
    float: left;
    width: 250px;
    }

Hopefully this helps.