How to properly align something that resizes in a specific location

Question

Alright I am working on a webpage and when you attempt to fill in a login form or register form it has a message pop-up if anything goes wrong... Or right. And I would like it in the center of the planet image. It is a Div. Also to note the planet image has text as part of it underneath so using the image for a center reference is out of the question. I merely want to know how I can Set the middle point to always be the same so when more than one error/message occurs it won't be off center and it would look nice as it grows with every message added. I'm not disclosing the name of the site for personal reasons.

Image: enter image description here

( Sorry for the potato quality )

CSS:

#banner{  
    width: 800px;  
    margin-left: -400px;  
    left:50%;  
    top: 100px;  
    margin-bottom: 20px;  
    font-size: 15px;  
    font-weight: bold;  
    color:rgb(255,255,255);  
    text-align: center;  
    line-height: 30px;  
    border-radius: 15px;  
    position: absolute;  
}

Html and Php:

<?php 
if (empty($_SESSION['errors']) === false) {
    echo '<div id="banner" style="background-color:rgb(120,0,0);">';
    output_errors($_SESSION['errors']);
    echo '</div>';
    $_SESSION['errors'] = NULL;
}

if (empty($_SESSION['message']) === false) {
    echo '<div id="banner" style="background-color:rgb(0,100,0);">';
    output_errors($_SESSION['message']);
    echo '</div>';
    $_SESSION['message'] = NULL;
}
?>

The function output_errors just turns an array to a string and echos it.

First off, use classes instead of id's; can't have multiple id's. Second, can you jsFiddle this? — SlightlyCuban, Sep 19 '13 at 20:58
First off Slightly Cuban, the Id is never present more than once... you either have errors or messages that is why it doesn't really matter. Also I don't think jsFiddle can simulate form data and php. Besides my question isn't relevant to the php but rather the css in order to position something using its center as the point rather than the top. — Darkaaja, Sep 19 '13 at 21:00
You can load generated HTML/CSS in jsFiddle. It is hard to understand what you mean by "set the middle point" while looking at only one `div`. Also, your logic isn't exclusive on the two `if` statements; sorry for jumping to conclusions there. — SlightlyCuban, Sep 19 '13 at 21:07
Lets say I add top: 500px; It will ALWAYS remain 500px from the top correct? What I want is say It always CENTERS on 500px instead of growing downwords it would grow and then center itself vertically on 500px. — Darkaaja, Sep 19 '13 at 21:25
CSS vertical centering? [Lot's](http://stackoverflow.com/q/114543/2372767) [of](http://stackoverflow.com/q/396145/2372767) [answers](http://stackoverflow.com/q/6663924/2372767) for that. [This article](http://blog.themeforest.net/tutorials/vertical-centering-with-css/) goes through all the techniques. If you don't care about IE < 9, I'd try `display: table-cell` — SlightlyCuban, Sep 19 '13 at 22:48

score 0 · Answer 1 · answered Sep 19 '13 at 22:38

Use Javascript or Jquery to get the height of your #banner element (http://api.jquery.com/height/), then use the result to change the top position of your element.

This assumes that your #banner message won't be greater than some value, since it could end up rendering off the top of your page.

score 0 · Accepted Answer · answered Sep 19 '13 at 23:04

Sounds like you want errors to be overlaid 500px in their container. Using a 1000px high div and display: table-cell:

HTML

<div id="table">
    <div id="cell">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
    </div>
</div>

CSS

#table {
    width: 100%;
    display: table;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1000px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}

And anything inside #cell should be centered at 500px of whatever contains #table. Example.

How to properly align something that resizes in a specific location

2 Answers2