Question

consider you have a code like this, please read the comments as I thought this would be easier to understant 🙂

<div class="container">
<div class="inner_container">

<div class="left">
This div sometimes expands to the right and pushes right div off the screen
</div>

<div class="right">
bla bla bla
</div>

</div>
<div id='bottomcontent'>
This content is below both of the divs, and when div '.right' expands down, I don't want this div pushed down as well, but have the 'right' div go under it/or just make those parts disappear and not push this div down.
</div>

</div>

This is the CSS:

.container {
    width: 796px;
    overflow:hidden;
}
.left {
    float: left;
    width: 256px;
}
.inner_container{
    width: 1396px;
}
.right {
    float: left;
    width: 796px;
}

Thanks a lot everyone, and if you have any questions I will try my hardest to explain anything that may be confusing to you, thank you ! 🙂

Answer 1

You can use position:absolute like this:

#bottomcontent {
    position: absolute;
    top: 30px;
    left: 256px; /* same as width of .left */
    background-color: white; /* if you dont want to see .right through #bottomcontent */
}

jsFiddle