Question

I’ve been toying around a bit with positioning (relative and absolute) and i ran into a weird problem.

HTML:

​<div class="one">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sem ac      lacus varius ullamcorper. Sed sed tincidunt lorem. Integer volutpat mauris eu elit condimentum vehicula. Vestibulum vitae urna id risus ornare porta. Praesent quis tortor nunc. Donec ut aliquam orci. Mauris cursus quam mauris. Aliquam iaculis, augue malesuada egestas blandit, erat lectus vestibulum magna, sed pharetra arcu orci nec ligula. Proin non sem dui. Integer viverra viverra est sit amet fermentum. Pellentesque egestas tristique eros vel interdum. Nam vel neque odio, et mollis nulla. Vestibulum fermentum augue vel justo ullamcorper molestie. Sed eget enim urna, a elementum mi. Aenean ornare viverra dictum.

 </p>
<div class="inner"></div>

</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.one{
    position: relative;   
}
.one p{
    margin-top: 60px;          
}
.inner{
  width: 100%;
  height: 50px;
  background:red;   
  position:absolute;
  top:0;
  right:0;
}​

As you can see here, I apply margin to the <p> tag, but it pushes the entire wrapping div and thus affecting the positioned element as well.

Is that the way it should behave or am i missing something?

Answer 1

Try overflow: auto; on your .one element.