CODEWITHSUNDEEP
javascripthtmlcss
ihsoy ih
ihsoy ih

Reputation: 1018

Put two 100% width divs side-by-side

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!

Upvotes: 0

Views: 1289

Answers (3)

Olly Hodgson
Olly Hodgson

Reputation: 15775

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 (i.e. you need to make sure you've got no white space between the two child div elements). I've stopped the divs 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;
    }

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115096

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

Upvotes: 0

KnowHowSolutions
KnowHowSolutions

Reputation: 680

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.

Upvotes: 0

Related Questions