HTML: COLUMNS NOT APPEARRING AS EXPECTED

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;
}
adimit19Asked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
sorry, I just looked at your question again. Take a look at this:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8"/>

    <style>
        #footer_wrapper {
            width: 1018px;
            height: 45px;
            margin: 0 auto;
            border:5px;

        }
        #footer1, #footer2{
            overflow:hidden;
        }
        #footer1 div{
            float:left;
            width:140px; /* at 145px, 7 of these add up to 1015 but I added a border so I had to accomodate that*/
            height:45px;  
            border:1px solid grey;
        }
        #footer2 div{
            border:1px solid orange;
        }



    </style>

    <body>

        <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><a>f2</a></div>
            </div><!-- end footer2 -->
        </div> <!-- end footer_wrapper --> 

    </body>
</html>

Open in new window

0
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
This is not valid css. You can't put a class inside a class...

#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;}

Open in new window


Here is a sample page with what I think you're trying to achieve:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>

<style>
#footer_wrapper {
      width: 1018px;
      height: 45px;
     margin: 0 auto;
      border:5px;
}
#footer1, #footer2{
    float:left;
    
}
#footer1 div{
    float:left;
    width:140px; /* at 145px, 7 of these add up to 1015, so you would only have 3 more pixels left for your second column. Also remember to accomodate padding and margins */
   height:45px;  
   outline:1px solid grey;  /* just so you can see what's going on */
}
#footer2 div{
    outline:1px solid orange; /* just so you can see what's going on */
}



</style>

<body>

<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><a>f2</a></div>
      </div><!-- end footer2 -->
</div> <!-- end footer_wrapper --> 

</body>
</html>

Open in new window

0
 
adimit19Author Commented:
looks good. Thx
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.