将两个100％宽度的div并排放置

Question

So if I want to have two divs, each of 100% of the entire page, side by side, given that the wrapper has overflow:hidden , how should I go about implementing it?

I have tried using inline-block but it did not work.

I have tried using float too but it caused errors.

I want the second div to be hidden so I can change it's left as an animation, sort of like a slide.

Thanks in advance!

Answer 1

If I've understood you correctly, you can achieve what you're after using inline-block . You just have to be a little careful with white space (ie you need to make sure you've got no white space between the two child div elements). I've stopped the div s from wrapping by setting white-space: nowrap; .

<div class="foo">
    <div> woo woo !</div><div> woo woo !</div>
</div>

.foo {
    overflow: hidden;
    white-space: nowrap;        
}
    .foo > div {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        background: aqua;
    }
    .foo > div +  div {
        background: lime;
    }

Try it out at http://jsfiddle.net/8Q3pS/2/ .

Edit: Here's an alternative implementation using position: absolute; : http://jsfiddle.net/8Q3pS/5/ . That way you'll be able to animate the second one into view using left . Note that you'll need to set a height on the parent div .

.foo {
    position: relative;
    width: 100%;
    height: 1.5em;
    overflow: hidden;
}
    .foo > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: aqua;
    }
    .foo > div +  div {
        left: 100%;
        background: lime;
    }

Answer 2

Could you not set max-width to 100%, not set the actual width and float them side by side? With both overflow:hidden, as they expand it should create horizontal scrollbars.

Answer 3

This should be purely a matter of positioning one of the divs off the page using absolute positioning and transitioning the left property using either hover state or javascript.

Hover the red div.

Codepen Example