CODEWITHSUNDEEP
htmlcss
Patrick
Patrick

Reputation: 2781

Place a table in the bottom of a printable page with css

I have an A4 page for print: 

.page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

Inside this page I'm trying to put in the bottom a table:

   <table id="t_obs">
        <tr>
            <td>TEXT</td>
        </tr>
    </table>

With the css:

#t_obs
{
   position: absolute;
   bottom:0px;
}

But only with bottom: -100px it's going to the bottom, why?

Thanks.

Upvotes: 0

Views: 69

Answers (4)

Mathias
Mathias

Reputation: 5672

When you use position: absolute the element you position is only positioned with regards to the closest parent with position specified. If you don't specify position for any parent it will be positioned relative the body.

If you want your table to be positioned relative the containing .page element ,then you should add position: relative to the CSS for .page

.page {
     position: relative;
     ...
}

Hopefully this will help show what I mean: http://jsfiddle.net/2nx8Z/4/

You can read more about positioning here: http://developer.mozilla.org/en-US/docs/Web/CSS/position

Upvotes: 1

lukehillonline
lukehillonline

Reputation: 2647

You just need to add position: relative to .page like so:

http://jsfiddle.net/qX2Kb/

Upvotes: 1

Jason Joseph Nathan
Jason Joseph Nathan

Reputation: 7601

Works when you add position:relative to .page.

See http://jsfiddle.net/8EZv6/1/

Upvotes: 1

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use position:relative to .page

  .page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position:relative;
}

DEMO

Upvotes: 1

Related Questions