CODEWITHSUNDEEP
cssmargin
Jeff
Jeff

Reputation: 2861

CSS footer margin problems

I've got a page which is laid out like this:

<div class="report">
    <div class="content">
        <!-- Lots of irrelevant stuff -->
    </div>
    <div class="footer">
        <!-- Footer content -->
    </div>
</div>

My footer is supposed to extend to the extreme left of the screen, but my 'report' class has a .25in left margin applied.

I've tried using a -.25in left margin, but this does not pull my footer left as expected. It doesn't seem to be moving the footer at all, in fact.

I know my CSS is tragetted correctly, because I can affect other attributes (top, bottom margin, color, etc) but I cannot get the footer to extend to the far left of the screen.

Unfortunately, I can't simply pull the footer outside of the 'report' div.

CSS:

.report
{
    font-size: 12pt;
    margin-left: 0.25in;
    width: 775px;
    position: relative;
    overflow: hidden;
}

.footer
{
    font-size: 8pt;
    height: 75px;
    margin: 15px 0 0 -0.25in;
    position: relative;
}

Upvotes: 0

Views: 2932

Answers (3)

Bill
Bill

Reputation: 3517

This jsFiddle works for me

The overflow: hidden on your .report element was hiding the footer, but it was in the right place.

Upvotes: 1

Adrenaxus
Adrenaxus

Reputation: 1613

You can't get your footer outside of your parent <div> because of the overflow: hidden; on your .report. Try to remove it, see this fiddle.

Upvotes: 1

chipcullen
chipcullen

Reputation: 6960

As it's the footer, you could try position: relative; left: -.25in;. BTW, why are you using inches?

Upvotes: 2

Related Questions