CODEWITHSUNDEEP
htmlcss
user1795832
user1795832

Reputation: 2160

Why doesn't the image in my footer stay inside the container?

I'm creating a website that contains a footer, on the left side just simple text. On the far right will be icons with links to various social networking sites. I can't get the icons to stay inside the container when I float the image to the right. How can I get the image to stay inside the yellow area and out of the green without adding any more padding to the footer?

http://jsfiddle.net/Fd4Pc/1/

body {
    background-color: #17241d;
    margin: 0;
}

#mainWindow {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffff6;
    height:100%;
}

.right {
    float:right;
}

footer, .footer {
    font-size: .8em;
  padding:10px;
}

<body>
<div id="mainWindow">
<p>Text here</p>
<div id="footer">
<footer> 
<span>Left Side</span>
    <img class="right" src="http://static.viewbook.com/images/social_icons/facebook_32.png" />
</footer>
</div>
</div>
</body>

Upvotes: 0

Views: 431

Answers (4)

Tushar
Tushar

Reputation: 4418

This can be done in two ways

Add overflow: hidden to footer

or

clear div that is

<footer>

<!--your code goes here-->

<div style="clear:both"></div>
</footer>

Upvotes: 0

lefoy
lefoy

Reputation: 1178

You can also set a line-height to your footer: http://jsfiddle.net/Fd4Pc/3/

footer, .footer {
    font-size: .8em;
    padding:10px;
    line-height: 2em;
}

Upvotes: 1

j08691
j08691

Reputation: 207861

Try adding overflow:auto to your footer:

footer, .footer {
    font-size: .8em;
    padding:10px;
    overflow:auto;
}

jsFiddle example

Upvotes: 2

Ali Adravi
Ali Adravi

Reputation: 22723

floated element will expand the parent element height, to expand that add float to the parent as well:

footer, .footer {
    font-size: .8em;
    padding:10px;
    float:left;
}

Upvotes: 0

Related Questions