CSS3 option to force content outside of parent container without AP

HTML & CSS
1

I have encountered several situations where I have a relatively positioned element within a fixed width container, and I need to force the element to break out of the bounds of its immediate parent and expand to the width of the body element.

I know that I could achieve this by taking the element out of the flow. For example: element{position:absolute}

However, I’d like the element to still exert its layout height on its sibling elements.

Any clever way to do this with CSS3 perhaps?

2

Do you have an example of this, or a screen shot of what you are aiming for? It might depend on how you want it to expand. I can think of a possible solution, but it may not suit what you want.

3

Absolutely. Thanks for any suggestions you may have Ralph. Here’s an example:

<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style>.container{max-width:650px;margin:0 auto}</style>
	</head>
	<body>
		<div class="container">
			This is content within the container
			<div class="breakOut">This content needs to expand to the width of the body element, but maintain its influence on its sibling elements.</div>
			<div class="sibling">This elements layout should flow as if the breakOut div was relatively positioned in flow. It should only expand as far as its parent allows</div>
		</div>
	</body>
</html>

In the example above, I want all elements within the container element to be flow at 650px wide, except the “breakOut” element. I want it to expand to 100% of the body element. However, I still want its relative height (especially when the browser window is resized) to influence its “sibling” elements as if its relative positioned within the container element.

4

My first suggestion would be to break up the content into full width sections, with inner divs set to max-width: 650px. Would that be viable?

Otherwise, if the .breakout div is set to position: relative, it will keeps its position as long as you don’t move it, but keeping it at the width of the viewport sounds tricky—like a job for JS. You could set negative left and right margins, but they wouldn’t be very all that flexible, unless you do something like this:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.container{width: 50%;margin:0 auto}
.breakOut {margin: 0 -50%;</style>
</head>
<body>
<div class="container">
This is content within the container
<div class="breakOut">This content needs to expand to the width of the body element, but maintain its influence on its sibling elements. This content needs to expand to the width of the body element, but maintain its influence on its sibling elements.This content needs to expand to the width of the body element, but maintain its influence on its sibling elements.This content needs to expand to the width of the body element, but maintain its influence on its sibling elements.</div>
<div class="sibling">This elements layout should flow as if the breakOut div was relatively positioned in flow. It should only expand as far as its parent allows</div>
</div>
</body>
</html>
5

Your example css works perfectly as long as the container is 50% and not a fixed width. Thanks for that. Any way to adapt it so that the container can be a fixed width?

A good example of what I’m talking about is the slider element at cnet.com

On a Mac at least, you can see how the slider expands to fill the browser width (haven’t tried on a PC), but the sibling elements are constrained to the fixed width of the main container element.

The cnet.com example is a bit less involved than my use case however, since the slider has a fixed width height. My example requires the same div to have a relative auto height based on its inner html content and the width of the browser window at any given time.

6

Yeah, they just have a giant width on that slider and then shift its position a bit. But I don’t like they way they’ve set it up. I would recommend you do as I first suggested, and divide the layout into separate “bands”, as shown here: http://pageaffairs.com/code-archive/full-width-bands/floated-columns.html

That’s much more reliable, IMHO.