Question

How do I overlap a div on the top of another div on screen resize. Below is my html. I want the white div to go on top of another red div, when the screen is dragged from right to left. Right Now the white div just goes beneath the red div.

below is my html:

<div id="red">RED DIV</div>
<div id="white">WHITE DIV</div>

#red{
     background:red;
     width:100px;
     height:100px;
     float:left;
     margin: auto 0;
     z-index:2
}
#white {
    background:white;
    width:100px;
    height:100px;
    margin: auto 0;
    float:left;
    position:relative;
    left:20%;
    z-index:200;
}

EDIT: Please don’t tell me to use position absolute. I want the text from the right side of white div to be trimmed on resize…

Answer 1

You need to add a position:absolute to the white div.

EDIT – updating to your position absolute statement – even though you’re probably just not doing it correctly

….

RE-EDIT – “I want the text from the right side of white div to be trimmed on resize” … I’m not sure I understand this line. The white div goes on top, right? AND it has a defined width of 100px, which will not change at all when you resize the screen. What is being trimmed and why? Do you mean you want the RED div to wrap the text that is being covered up by the WHITE div that is going on top as per your statement here: “I want the white div to go on top of another red div”
You will need to clarify your needs before I can help on this one.