Update size of 100% width element

Question

i've got the following problem.

I have this page structure:

<body>
    <nav></nav> // position absolute, width 300px
    <main></main> // position relative, width 100%
 </body>

Layout

The main element lays over the nav. I've got a jquery function to open the nav which pushes the main to the right. But the main element is going out of my body to nowhere instead of staying 100% width. This is quite logicaly because the body didn't change.

How can i structure my layout to achieve that the main element acts responsive to the changes?

Here is the jsfiddle:

http://jsfiddle.net/9td4cf03/

possible duplicate of [Expand div to take remaining width](http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width) — Etheryte, Oct 10 '14 at 11:56
Must `main` definitely remain at `width:100%` all the time? If you don't want it to be 100% you shouldn't set it to be 100%. — Rhumborl, Oct 10 '14 at 12:24
@Rhumborl: it should be responsive and not going outside the body. — Pascal Cloverfield, Oct 10 '14 at 12:48

Marc Audet · Accepted Answer · 2014-10-10T13:33:43.987

I took the liberty of simplifying your HTML and CSS as follows.

One approach is to use absolute positioning to move your nav block and its content out of the flow.

The .st-main block is stacked over the nav.

When you click the button, you can make the nav visible by expanding the left margin of the .st-main block. This will work quite well with CSS3 transitions.

$(document).ready(function () {
     $("button").on('click', function () {
         $(".st-main").toggleClass('expand');
     });
 });

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.st-container {
    height: 100%;
    position: relative;
}
.st-menu {
    position: absolute;
    top: 0; left: 0;
    width: 300px;
    height: 100%;
    background-color: beige;
}
.st-main {
    position: relative;
    z-index: 1;
    height: 100%;
    margin-left: 0px;
    transition: margin-left 0.5s ease-in-out;
    background-color: lightgray;
    border: 1px dotted blue;
    box-sizing: border-box;
}
.st-main.expand {
    margin-left: 300px;
}
button {
    position: absolute;
    z-index: 2;
    top: 0; left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="st-container">
    <button>Click</button>
    <nav class="st-menu">
        <ul id="menu">
            <li>First stuff</li>
            <li>Second stuff</li>
            <li>Third stuff</li>
        </ul>
    </nav>
    <main class="st-main"></main>
</div>

Thank you! That works perfectly and is very easy. :) – Pascal Cloverfield Oct 13 '14 at 06:58 — Pascal Cloverfield, Oct 13 '14 at 06:58

score 0 · Answer 2 · answered Oct 10 '14 at 13:37

One method is to use box-sizing on your main element (or possibly on everything). This will make the padding value included within the overall width value. Effectively it will allow you to give it a width:100%; and then give it a padding-left:300px; and the 300px will be subtracted from the 100%.

CSS:

*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
    -moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
    box-sizing:         border-box;
}

You can either apply this to everything via the * like I have shown, or just apply it to the main. I recommend applying it to everything if your site is not to complicated yet.

Update size of 100% width element

2 Answers2