如何使用css在html中停靠元素

Question

i have a main div whose css is :

.major
{
width:30%;
height:100%;
position:absolute;
}

now i want to inset an web info at the bottom part which is like

about | terms | Policies | Contact us

this div is .web_info

so my html is

<div class="major">
<div class="web_info"></div>
</div>

Now i want the web_info div to appear always at the bottom of the parent div ie "major" ..

i have treid :

.web_info
{
padding-top:90%;
}

But the solution isn't general .. ie compactible for my screen only .. What to do ??

Answer 1

Do you mean something like this one?

.web_info {
    position:absolute;
    bottom:0;
}

So the Div "docks" always at the bottom of the parent div. Important, to get this work the parent div major must have the

position:relative;

property.

Answer 2

You'll need another HTML element to set a relative position :

<div class="major">
  <div class="innerRelative">
    <div class="web_info"></div>        
  </div>
</div>

See the fiddle working: http://jsfiddle.net/A4GNs/