Solved

HTML: COLUMNS NOT APPEARRING AS EXPECTED

Posted on 2012-03-11
3
241 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
multiple selects 23 49
Insert Button on a table 16 38
Use Images instead of radio button and get the checked value and pass it to a h2 tag 3 20
IF statment In Powershell 12 19
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

821 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