Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Jquery fadeout box CSS problem

  • 13-03-2011 5:22pm
    #1
    Registered Users, Registered Users 2 Posts: 3,579 ✭✭✭


    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!
    xkj0M.jpg

    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;
    }


Comments

  • Registered Users, Registered Users 2 Posts: 10,245 ✭✭✭✭Fanny Cradock


    Perhaps this is a problem with you not clearing your floats :confused:

    Did you try setting overflow:auto in #div1?


  • Registered Users, Registered Users 2 Posts: 3,579 ✭✭✭BopNiblets


    Clearing my floats? How do I do that? :p

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


  • Moderators, Category Moderators, Entertainment Moderators Posts: 36,711 CMod ✭✭✭✭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?


  • Registered Users, Registered Users 2 Posts: 3,579 ✭✭✭BopNiblets


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


Advertisement