make a div bigger than its container

[Renlok]

Sorry i wasnt sure to post this in HTML or CSS

 

But what i want is to try and make the effect in the attachment so it looks like its being wrapped around the page. And i cant add the hangover bits with absolute divs because the part above it will change size as its dynamically generated.

 

So i was wondering if its possible to make a div bigger than its container? or if theres a better way

 

[attachment deleted by admin]

[FaT3oYCG]

cut the image edges off and put them in the container then the div will simply contain the central part of the image.

[haku]

This is what I have done for a similar theme:

 

HTML:

<div id="wrapper">
  //page contents
</div>
<div id="header_wrapper">
  <div id="header">
    // header contents
  </div>
</div>

 

CSS:

#wrapper
{
  width:800px;
  padding-top:300px; // set this to enough space for the entire header
  margin:0 auto;
}
#header_wrapper
{
  position:absolute;
  top:100px;
  height:200px; (top positioning plus height cannot be more than the top padding left on the body)
}

#header
{
  width:900px;
  margin:0 auto;
}

[isedeasy]

This can easily be achieved by using negative margins (as long as the parent is not set to overflow:hidden;)

 

example here

 

CSS

#parent {
	width:800px;
	background:red;
	margin:0 auto;
	min-height:1000px;  /** just for show **/
	padding:100px 0 0 0;	/** just for show **/
}

#child {
	margin:0 -20px;
	background:blue;
	min-height:100px;	/** just for show **/
}

 

HTML

<div id="parent">

<div id="child">

</div>

</div>

[haku]

Only problem with negative margins is that they can be a little buggy - i.e. not consistent across browsers.

 

[JustLikeIcarus]

You may get better results using 2 divs as well.