CODEWITHSUNDEEP
htmlcss
Zafta
Zafta

Reputation: 667

how to dock elements in html using css

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 i.e "major" ..

i have treid :

.web_info
{
padding-top:90%;
}

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

Upvotes: 1

Views: 7116

Answers (2)

enguerranws
enguerranws

Reputation: 8233

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/

Upvotes: 1

chris
chris

Reputation: 4867

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.

Upvotes: 2

Related Questions