Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

HTML: COLUMNS NOT APPEARRING AS EXPECTED

Posted on 2012-03-11
3
Medium Priority
?
246 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 2000 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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

609 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