CODEWITHSUNDEEP
htmlcss
OzzC
OzzC

Reputation: 821

issue using 2 sections inside <footer> element

Im trying to have 2 sections inside my <footer> element.

My 1st section I want to have some columns with content. (its owrking fine)

My 2nd section I want to have below the 1st section and I want to have a black background with a paragraph aligned at left.

I think Im doing everything ok but its not working correctly.

Do you see what can be wrong in my code?

Im having this:

enter image description here

But Im trying this:

enter image description here

My jsfiddle with issue Im having:

http://jsfiddle.net/ra3zc/1/

My html:

<footer id="footer-container">
    <section id="footer">
         <div id="col" >
            <h1>Title of my column 1</h1>
            <p>Content of col 1</p>
        </div>
         <div id="col" >
            <h1>Title of my column 2</h1>
            <p>Content of col 2</p>
        </div> 
         <div id="col" >
            <h1>Title of my column 3</h1>
            <p>Content of col 3</p>
        </div> 
    </section>
  <section id="footer2">
        <p>&copy; I want copyright float at left in section 2</p>
    </section>
  </footer>

My css:

#footer-container
{
    width:100%;
    height:auto;
    float:left; 
    background:gray;
} 

#footer
{
    width:960px;
    margin:0 auto 0 auto;
}

#col
{
    float:left;
    margin-right:40px; 
    margin:10px 53px 10px 0;
    width:200px;
}

#col h1
{
    color:#fff; 
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}

#col p
{

    color:#ccc; 
    font-size:14px; 
    margin-bottom:10px;
}  


#footer
{
    width:960px;
    margin:0 auto 0 auto;
    background:#000;
    height:100px;
}

Upvotes: 0

Views: 96

Answers (2)

Ayman Safadi
Ayman Safadi

Reputation: 11552

Basically your floats weren't clearing.

All you need to know about floats: http://css-tricks.com/all-about-floats/

Try this:
http://jsfiddle.net/ra3zc/2/

#footer-container {
    width:100%;
    height:auto;
    background:gray;
}
#footer {
    overflow: hidden;
    width:960px;
    margin:0 auto 0 auto;
}
#col {
    float:left;
    margin-right:40px;
    margin:10px 53px 10px 0;
    width:200px;
}
#col h1 {
    color:#fff;
    font-size:17px;
    font-weight:bold;
    margin-bottom:10px;
}
#col p {
    color:#ccc;
    font-size:14px;
    margin-bottom:10px;
}
#footer2 {
    width:960px;
    margin:0 auto 0 auto;
    background:#000;
}
#footer2 p {
    padding: 2em 0;
    color: white;
}

Upvotes: 1

philipp
philipp

Reputation: 16515

<footer id="footer-container">
<section id="footer">
     <div id="col" >
        <h1>Title of my column 1</h1>
        <p>Content of col 1</p>
    </div>
     <div id="col" >
        <h1>Title of my column 2</h1>
        <p>Content of col 2</p>
    </div> 
     <div id="col" >
        <h1>Title of my column 3</h1>
        <p>Content of col 3</p>
    </div> 
</section>
<div class="clear"></div>
  <section id="footer2">
    <p>&copy; I want copyright float at left in section 2</p>
</section>
</footer>

plus:

.clear {clear: both;}

have a look the additional div between the sections

Upvotes: 1

Related Questions