CODEWITHSUNDEEP
csshtml
MrViSiOn
MrViSiOn

Reputation: 191

div overflow with outside relative img

I just have a silly issue (I think...) with a div tag in html.

I want to positionate a background relative image at top left corner, half image outside its container.

Issue is that container doesn't fill to all Its content. I try to use "overflow: auto" property but left corner image turns hidden.

My html:

<div class="content">
    content of the page
</div>
<footer id="footer">
    <div class="column" id="footer-izda">
        <span id="logo-sup"> </span>
        <span>conecta con nosotros</span>
        <ul>
            <li class="twitter">outside of box </li>
            <li class="facebook">outside of box</li>
        </ul>
    </div>

    <div class="column" id="footer-dcha">
        <div class="module widget_nav_menu  deepest">Copyright © 2013</div>
    </div>
</footer>

My CSS:

.content{
    margin-bottom: 2%;  
}

footer{
    background-color: #333333;
    color: #EDEDED;
    padding: 1%;
    display: block;
    /*overflow: auto;*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.column #logo-sup{
    background: url('http://formate21.es/wp-content/themes/master/images/footer.png') left top no-repeat;
    width: 26px;
    height: 26px;
    top: -25px;
    left: 0;
    float: left;
    position: absolute;
}

#footer-izda {
    float: left;
    width: 50%;
    position: relative;
    text-align: left;
}

I wrote this on jsfiddle: http://jsfiddle.net/ecXba/10/

Any suggestion?

Upvotes: 0

Views: 92

Answers (1)

Kingk
Kingk

Reputation: 1023

Put below code just before </footer> tag.

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

Hope this helps!

Upvotes: 2

Related Questions