Solved

HTML: COLUMNS NOT APPEARRING AS EXPECTED

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

759 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

21 Experts available now in Live!

Get 1:1 Help Now