troubleshooting Question

HTML: COLUMNS NOT APPEARRING AS EXPECTED

Avatar of adimit19
adimit19Flag for Canada asked on
CSSHTML
3 Comments2 Solutions280 ViewsLast Modified:
In the following code, I expect one row of 7 columns, and a second row right below it of 1 column.

Here is the HTML:
<div id="footer_wrapper">
      <div id="footer1">
                  <div id="footer1_col1"></div>
            <div id="footer1_col2"></div>
            <div id="footer1_col3"><a>vv</a></div>
            <div id="footer1_col4"><a>cc</a></div>
            <div id="footer1_col5"><a>dd</a></div>
            <div id="footer1_col6"></div>
            <div id="footer1_col7"></div>
      </div><!-- end footer1 -->
      <div id="footer2"></div><!-- end footer2 -->
</div> <!-- end footer_wrapper -->

What I get are three one column rows. Why is that?

CSS:

#footer_wrapper {
      width: 1018px;
      height: 45px;
    margin: 0 auto;
      border:5px;
}
#footer1{.footer;}
#footer2{.footer;}
#footer1_col1{.footer_OutsideColumn_noText;}
#footer1_col2{.footer_OutsideColumn_noText;}
#footer1_col3{.footer_OutsideColumn_withText;}
#footer1_col4{.footer_OutsideColumn_withText;}
#footer1_col5{.footer_OutsideColumn_withText;}
#footer1_col6{.footer_OutsideColumn_noText;}
#footer1_col7{.footer_OutsideColumn_noText;}
#footer1_col3 a{.footer_OutsideColumnText;}
#footer1_col4 a{.footer_OutsideColumnText;}
#footer1_col5 a{.footer_OutsideColumnText;}

.footer {
      background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center;
      width:1014px;
      height:45px;
      margin:0 auto;padding:0;
    float:left;
      border-color:0;
      left:50%;
         margin-left: -507px; /* 50% of the div's width*/
}
.footer_OutsideColumn_noText{
      width:145px;
      height:45px;
      margin:0 auto;
      padding:0;
      text-align:left;
      float:left;
      background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center;
}
.footer_OutsideColumn_withText{
      width:145px;
      height:45px;
      margin:0 auto;
      padding:0;
      text-align:left;
      float:left;
      background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center;: url(../images/headings/Footer_Heading1_Underline.png) no-repeat;background-position:center;
}
.footer_OutsideColumnText{
      text-align:left;
      font-family:"Myriad Pro";
      font-size:12px;
      color:#b82323;
      height:45px; line-height:45px;
      margin-left: 45px;
}
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 2 Answers and 3 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros