CODEWITHSUNDEEP
htmlcss
test
test

Reputation: 18198

Stick a DIV at TOP and middle using CSS

So far I have this:

<style>
#success_notification {
position:absolute;
top:0;
width:30%;
text-align:center;
    font:20px Georgia;
    color:#5C5C5C;
    background:#F2FFED;
    padding:10px;
}

</style>

<div style="margin:0 auto;"><div id='success_notification'>TESTING.</div></div>

and the div stays on the left... still. What am I doing wrong? Thanks.

Upvotes: 2

Views: 13972

Answers (4)

Andrade
Andrade

Reputation: 1199

...or even:

float:left;

...or:

float:right

this works great in all browsers

Upvotes: 0

Ben Blank
Ben Blank

Reputation: 56604

You aren't setting left or right, causing your absolutely-positioned element to default to a left of 0. Try this:

#success_notification {
    position: absolute;
    top: 0;
    left: 35%;
    width: 30%;
    text-align: center;
    font: 20px Georgia;
    color: #5C5C5C;
    background: #F2FFED;
    padding: 10px;
}

Upvotes: 5

Mike Mengell
Mike Mengell

Reputation: 2398

Here you go.

Removed the position: absolute, added the margin: auto to style, added width 100% to outer div. Works for me.

<style>
#success_notification {
top:0;
width:30%;
margin: auto;
text-align:center;
    font:20px Georgia;
    color:#5C5C5C;
    background:#F2FFED;
    padding:10px;
}

</style>

<div style="width: 100%; margin:0 auto;"><div id='success_notification'>TESTING.</div></div>

Upvotes: 2

Naftali
Naftali

Reputation: 146310

try this:

#success_notification {
    position:absolute;
    top:0;
    left: 50%;
    width:30%;
    text-align:center;
    font:20px Georgia;
    color:#5C5C5C;
    background:#F2FFED;
    padding:10px;
}

Upvotes: 0

Related Questions