CODEWITHSUNDEEP
css
pufAmuf
pufAmuf

Reputation: 7805

Not push below div down when content expands?

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 ! :)

Upvotes: 1

Views: 2846

Answers (2)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41895

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

Upvotes: 1

Flowerking
Flowerking

Reputation: 2581

I think you can use overflow property here. Sorry if I am wrong as I can't understand your context clearly.

You can try this :

.left {
    float: left;
    width: 256px;
    overflow:scroll; 
}

to avoid pushing the right div off the screen.

and for bottomcontent class you can try using position:absolute

Upvotes: 2

Related Questions