How do i properly position absolute divs within twitters bootstrap css framework

css twitter-bootstrap positioning absolute
Brian picture Brian · Mar 28, 2012 · Viewed 33.7k times · Source

I can't seem to get a div to absolutely position within its parent using the twitter bootstrap framework. I have a series of rows that follow a scheme as follows

<div id='wrapper'>
<div class='row-fluid'>
    <div class='span2'>some content here</div>
    <div class='span9'>other content to the side of the first div</div>
    <div class='timestamp'>123456 this should align to the bottom right of wrapper</div>
</div>
</div>

css

.timestamp{
   position:absolute;
   bottom:0px;
   right:0px;
}

But the timestamp div always positions itself to the absolute of the body of the whole dom document ignoring any intermediate divs. Any ideas what is causing this?

Answer

Nic Meiring picture Nic Meiring · Mar 28, 2012

Your css should include

 #wrapper {
    position: relative;
}

The default positioning is static.

check out this article: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Related questions

Bootstrap modal getting blacked out because of positioned navbar

When my Bootstrap modal is shown, it looks like it's behind the black backdrop. Clicking anywhere on the screen causes the modal to go away. The problem seems to be caused by positioning my navbar - removing position: absolute; or …

Read More
Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More