SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 option to force content outside of parent container without AP

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely. Thanks for any suggestions you may have Ralph. Here's an example:

    HTML Code:
    <!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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <!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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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/...d-columns.html

    That's much more reliable, IMHO.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •