adimit19
asked on
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_Outs ideColumn_ noText;}
#footer1_col2{.footer_Outs ideColumn_ noText;}
#footer1_col3{.footer_Outs ideColumn_ withText;}
#footer1_col4{.footer_Outs ideColumn_ withText;}
#footer1_col5{.footer_Outs ideColumn_ withText;}
#footer1_col6{.footer_Outs ideColumn_ noText;}
#footer1_col7{.footer_Outs ideColumn_ noText;}
#footer1_col3 a{.footer_OutsideColumnTex t;}
#footer1_col4 a{.footer_OutsideColumnTex t;}
#footer1_col5 a{.footer_OutsideColumnTex t;}
.footer {
background: url(../images/spacers/Whit eSpacer.pn g) 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_noTe xt{
width:145px;
height:45px;
margin:0 auto;
padding:0;
text-align:left;
float:left;
background: url(../images/spacers/Whit eSpacer.pn g) repeat;background-position :center;
}
.footer_OutsideColumn_with Text{
width:145px;
height:45px;
margin:0 auto;
padding:0;
text-align:left;
float:left;
background: url(../images/spacers/Whit eSpacer.pn g) repeat;background-position :center;: url(../images/headings/Foo ter_Headin g1_Underli ne.png) no-repeat;background-posit ion:center ;
}
.footer_OutsideColumnText{
text-align:left;
font-family:"Myriad Pro";
font-size:12px;
color:#b82323;
height:45px; line-height:45px;
margin-left: 45px;
}
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 id="footer1_col4"><a>cc</a
<div id="footer1_col5"><a>dd</a
<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_Outs
#footer1_col2{.footer_Outs
#footer1_col3{.footer_Outs
#footer1_col4{.footer_Outs
#footer1_col5{.footer_Outs
#footer1_col6{.footer_Outs
#footer1_col7{.footer_Outs
#footer1_col3 a{.footer_OutsideColumnTex
#footer1_col4 a{.footer_OutsideColumnTex
#footer1_col5 a{.footer_OutsideColumnTex
.footer {
background: url(../images/spacers/Whit
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_noTe
width:145px;
height:45px;
margin:0 auto;
padding:0;
text-align:left;
float:left;
background: url(../images/spacers/Whit
}
.footer_OutsideColumn_with
width:145px;
height:45px;
margin:0 auto;
padding:0;
text-align:left;
float:left;
background: url(../images/spacers/Whit
}
.footer_OutsideColumnText{
text-align:left;
font-family:"Myriad Pro";
font-size:12px;
color:#b82323;
height:45px; line-height:45px;
margin-left: 45px;
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER