Solved

HTML: COLUMNS NOT APPEARRING AS EXPECTED

Posted on 2012-03-11
3
239 Views
Last Modified: 2012-03-11
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;
}
0
Comment
Question by:adimit19
  • 2
3 Comments
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 500 total points
ID: 37707862
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 37707890
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
 

Author Comment

by:adimit19
ID: 37708014
looks good. Thx
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now