I have a web application which uses Bootstrap (2.3.2 - corporate policy, we cannot upgrade to 3.0 without lots of testing across several web applications). We have several long pages within this application that require validation of forms and tables - however due to practical and aesthetic reasons we need to have an alert message appear as a floating div at the top of the page.

This will be a fixed floating div, that can be shown and hidden using javascript as and when needed. This part works and I can control this div, whenever I need to flash some information to the user or some error takes place.

The layout is like so:

<div id=message>

    <div id=inner-message class=alert alert-error>

        <button type=button class=close data-dismiss=alert>&times;</button>

        test error message

    </div>

</div>

The styling is below:

#message {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

}

#inner-message {

    margin: 0 auto;

}

The #message div behaves all well and good, but when I try and add some padding to the #message div (to try and get some space between the edge of the page and the div i.e. padding: 5px), the div only gets padding on the left and top and the rest of the div is pushed out too far to the right of the page (hiding part of the 'x' inside the bootstrap alert).

Has anyone experienced this before? It seems like a simple enough issue, so am I overlooking something?