Question

Edit 1

Have updated with a jsfiddle link. http://jsfiddle.net/DrFSV/

See the wavy image in the last row? I’m trying to get that move outside of #outer_middle.

Advice?

This pertains to the original link. Have removed site’s link.

I have a div container named #outer_middle, and inside that, I have two other containers named #middle and #sidebar.

I am trying to have a div inside #middle go a bit outside the container …

So, I put position:relative to #outer_middle, and position:absolute to #diy (the one with black border) coupled with left:-90px;

(as per my understanding that if you’re trying to get an inside container move outside of its outside container, you need to put relative and absolute positioning like this).

It affects the sidebar (pink column) and that goes underneath #middle and the diy image goes to the left inside the container, not outside.

Why?

How can I get the #diy move to the left outside of the container?

And is it possible to do this so #diy remains in the flow as well?

Advice, please? Please let me know if my question is unclear. Thanks.

Answer 1

Change your #outer_top and #top to the code below. See if that’s what you are trying to achieve:

#outer_top {
  background-color: red;
  width: 1000px;
  margin: 0 auto;
}

#top {
  margin: 0 0 0 -90px;
  width: 500px;
  background-color: pink;
  height: 100px;
}