CSS - full width element within narrow parent?

Question

I have a blog post that is 960 pixels wide.

I want parts of this blogpost to cover 100% of the viewport (from left: 0 to right: 0). It's fairly easy to do with absolute positioning but using this approach it's impossible to clear these 100%-wide elements.

HTML:

<div class="wrapper">
    <h1>A header</h1>
    <p>Some content.</p>
    <div class="out">
        <blockquote>Some blockquote.<br/> Another line.<br/>And another.</blockquote>
    </div>
    <p>Clears don't work here and this content is invisible :( </p>
    <p>And this sucks :( </p>
    <div class="out">
        <blockquote>And different blockquote.<br/> Another line.<br/></blockquote>
    </div>
    <p>Also this is behind blockquote as well.</p>
</div>

CSS:

body {
    position: relative;
}

.wrapper {
    margin: 0 auto;
    padding: 15px;
    background: #eee;
    width: 400px;
    height: 1000px;
}

.out {
    position: absolute;
    right: 0;
    left: 0;
    padding: 15px;
    background: #aaa;
    width: 100%:
}

blockquote {
    margin: 0 auto;
    width: 400px;
}

Here's a demo:

http://jsfiddle.net/2rC2S/1/

Note: all blockquotes have different height so I can't set it for them. I don't want to use JavaScript (because it's fairly easy to get elements height, set this and boom, but who renders content with JS?!).

you may try with simply .out {background: #AAAAAA; margin: 0 -15px; padding: 15px;} is it something like this you are looking for http://jsfiddle.net/2rC2S/3/ — Pravin W, Mar 26 '14 at 09:31
I want the .out to cover 100% of the viewport width-wise, so for example if user uses full HD resolution the out will be 1980px wide etc. While wrapper stays the same. — Wordpressor, Mar 26 '14 at 09:32

score 4 · Answer 1 · answered Mar 26 '14 at 09:46

4

You may do this by using before and after pseudo selectors as follows

.out:before, .out:after {
     content:"";
     background: black;
     position: absolute;
     top: 0;
     bottom: 0;
     width: 9999px;
 }
 .out:before {
     right: 100%;
 }
 .out:after {
     left: 100%;
 }

http://jsfiddle.net/kM3Gf/

you may find original article here http://css-tricks.com/examples/FullBrowserWidthBars/

still I am not sure about browser compatibility!

answered Mar 26 '14 at 09:46

Pravin W

2,451
1
20
26

`width: 9999px` ? Why waste so much memory? 50vw is enough – nice ass Mar 26 '14 at 09:55
well this is because nowadays device width and screen resolution varies so it whould fit for all purposes. also I am curious if we use width: 9999px will it be related with memory or how much it will impact on web page performance. can you provide any link to justify thanks in advance – Pravin W Mar 26 '14 at 09:59
This is very promising, but unfortunately doesn't seem to work at all when you set wrappers width to x px (works only with %):( – Wordpressor Mar 26 '14 at 10:02
@Pravin: I didn't test it, but I think it's a fair assumption considering you're forcing the browser to draw a 9999px box. What's wrong with using 50% of the viewport? http://jsfiddle.net/sGJYe/ – nice ass Mar 26 '14 at 10:05
http://jsfiddle.net/2rC2S/8/ is updated with @ onetrickpony suggestion but I dunno vw units compatibility @Wordpressor its also updated with width in pixel on .wrapper dows it helps? – Pravin W Mar 26 '14 at 10:09

score 1 · Answer 2 · answered Mar 26 '14 at 09:41

Maybe you can avoid setting the width for the wrapper and instead set it for each of the content elements?

An absolutely positioned element won't take up space in the document and thus won't push any content down.

See this DEMO

.wrapper h1, .wrapper p {
    margin: 0 auto;
    padding: 15px;
    background: #eee;
    width: 400px;
}

CSS - full width element within narrow parent?

2 Answers2