Question

I am using skeleton css framework and i need some divs to occupy the maximum width possible,something like how SO does in the div holding the search input box.I have this fiddle http://jsfiddle.net/pRmus/1/ showing a simple div i made

.all-width{
    background-color:pink;
    }

Since i am displaying this div inside the container and the container width is 940px,the width cannot cover all the width the browser offers.Is there a solution i can i use to get what i want?.I was thinking z-index on that div,but i am not so sure.

Answer 1

Try moving the pink bar outside of container. Make a wrapper around an individual container, so this wrapper can really have 100% width.

JSFiddle http://jsfiddle.net/Y5mB6/

HTML

<div class="container">
    <div class="sixteen columns">
        <h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
        <h5>Version 1.2</h5>
        <hr />
    </div>
</div>
<div class='wrapper'>
    <div class="container">            
        <div class="sixteen columns">
            <p>hello world</p>
        </div>
    </div>
</div>
<div class="container"> 
    <div class="one-third column">
        <h3>About Skeleton?</h3>
...

CSS

.wrapper{
    background-color:pink;      
}