CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vishnu
Vishnu

Reputation: 2452

absolute ignoring parent padding

I am using bootstrap and I am trying to create my own dropdown menu on right side.

I Tried below css.But its ignoring parents padding.But when I use position : relative Its working fine but its pushing the text contents down.So I want absolute overlay but also Preserve the parent padding.

.menu
{
  background:#ccc;
  top: 50px;
  right: 0px;
  position: absolute;
  clear: both;
}

Here is the fiddle with html - http://jsfiddle.net/97bqun6s/

P.s: my parent is bootstrap .container class whose padding varies for screen sizes.

Upvotes: 0

Views: 1044

Answers (1)

Jackson
Jackson

Reputation: 3518

When you use position: absolute on an element then that element will be positioned within its closest 'non static' parent container's content area and padding box. You can refer to the Box Model for reference.

A simple solution would be to say right: 15px. This will offset the side-nav from the right to align with the rest of the container.

See this jsFiddle

EDIT:

Since the padding of the container is variable this may not be a viable solution.

You could instead add a wrapper div just inside the container

<div class="container">
    <div class="content-wrap">
        ...
    </div>
</div>

and position it relative.

 .content-wrap {
    position: relative;
 }

See updated jsFiddle

Upvotes: 1

Related Questions