CODEWITHSUNDEEP
htmlcss
knoefel
knoefel

Reputation: 6949

CSS - Two Divs overlapping, both with fixed width

So after several attempts i'm a little lost right now. I have a two columns layout.

html:

...
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

Both (left and right) have a fixed width, for example 700px. What i want them to do is, when the viewport width is smaller than 1400px the right div should overlay the left div. I successfully did it with position: absolute on the left div and float right on the right div. But this does work only as long as the height of the right div is bigger than the left div.

If requested i can add an image. Any help or hint would be awesome. Thanks.

UPDATE

i have to support ie8+. and both divs should be visible. i added an image, hope it makes my requirements more clear.

enter image description here

UPDATE 2:

I created a jsbin to show what i'm trying to achieve. Right now it is the position absolute solution, but as i said it isn't working when the content of the position absolute div is bigger than the other floated div (see jsbin). you have to start the jsbin output in a extra tab. Then reduce the window width to see the desired effect.

JSBIN

Upvotes: 0

Views: 1717

Answers (2)

Torge
Torge

Reputation: 2284

Your overlay definistion is a bit rough,

maybe you mean this?

HTML

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS

#wrapper {
    position: relative;
    max-width: 1400px; 
}

#left, #right {
    position: absolute;
    width: 700px;
    height: 400px; //or whatever
    overflow: auto;
}

#left {
    background-color: black;
    left: 0;
}

#right  {
    background-color: grey;
    right: 0;
    z-index: 1;
}

EDIT: Added a fixed height with scrolling.

Upvotes: 0

Benjamin Poignant
Benjamin Poignant

Reputation: 1064

You can use conditional css :

<html>
<style>
#left{
    width:700px;
    background-color:red;
    float:left;
}
#right{
    width:700px;
    background-color:blue;
    float:left;
}

@media (max-width: 1400px) { 
    #left{
        position:absolute;
        z-index:1;
    }
    #right{
        position:absolute;
        z-index:5;
    }
}
</style>
<body>
<div id="wrapper">
  <div id="left">a</div>
  <div id="right">a</div>
</div>
</body>
</html>

Upvotes: 2

Related Questions