CODEWITHSUNDEEP
css
tony noriega
tony noriega

Reputation: 7663

How to float 2 columns in my footer

for the life of me i cant figure this out...

how can i get 2 columns to float in my footer:

<footer>
     <div id="footerWrap">
          <div id="footerLeft">
               left col
          </div>

          <div id="footerRight">
                right col
          </div>
     </div>
</footer>

and my CSS:

footer {
    background: url("../images/50x50white-bg.png") repeat scroll 0 0 transparent;
    clear: both;
}
#footerWrap {
    margin: 0 auto;
    padding: 20px;
    width: 960px;

}
#footerLeft {
    border-right: 1px solid #000000;
    width: 349px;
    float:left;
}
#footerRight {
    border-right: 1px solid #000000;
    width: 609px;
    float:left;
}

Upvotes: 0

Views: 66

Answers (1)

numbers1311407
numbers1311407

Reputation: 34072

You're probably experiencing a problem because #footerLeft and #footerRight are too wide. The wrapper is 960px with 20px of padding on either side, leaving only 920px. The width of your two footer elements is adding up to 960. You need to remove the horizontal paddng on #footerWrap or decrease the width of each of your footer elements by 20.

/* Then simply: */
#footerRight, #footerLeft {
  float: left;
} 

/* and potentially a simple clearfix: */
#footerWrap {
  overflow: hidden;
}

Upvotes: 3

Related Questions