Jquery fadeout box CSS problem

BopNiblets

Hi guys, I have a Ruby on Rails flash message that pops up on the bottom of my page then fades out using a jquery timeout, however the div(s) above it has a variable height so the flash msg text is appearing below the div but the actual border around it is appearing where the blue box is in the pic below, and I want it around the text below div1!


I've tried fiddling around with min/max-height and display block/inline, but none of them push the flash div border (included) down to the bottom no matter what height div1 is, any ideas?

Here's my CSS:
.div1{
width: 900px;
margin: auto;
}

.div2{
float: left;
width: 770px;
font-size: small;
margin: auto;
background-color: #303030;
border: 1px solid;
border-color: #FFFFFF;
padding: 10px;
}

.flash {
text-align: center;
width: 510px;
height: 20px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background-color: #303030;
border: 1px solid;
border-color: #FFFFFF;
padding: 5px;
}

Fanny Cradock

Perhaps this is a problem with you not clearing your floats

Did you try setting overflow:auto in #div1?

BopNiblets

Clearing my floats? How do I do that?

I'll try the overflow thing, but I'd prefer not to have the scrollbar.

pixelburp

Clearing floats means that for the next element / block you wish to not be floated, you use the following:

clear: both;

So in your diagram above, if the left & right columns are floated (left and right), if you set clear: both on your flash div, it won't be part of the floated elements above. Does that make sense?

BopNiblets

Yep, I'll try that, wasn't aware of that clear element.