Es gibt mehrere Möglichkeiten, ich empfehle dir erstmal solche Informationsboxen zu gruppieren.
Schau dir mal das an:
http://jsfiddle.net/Cireyses/y6NwM/
Die Klasse infoWrapper bestimmt den Abstand von Oben, Rechts, Unten und Links, dass musst du dann anpassen.
In der Klasse infobox ist das Bild vorhanden sowie der text über <p></p>
Edit:
Du solltest auch dein Template deiner Seite bearbeiten,
du solltest dein main_content auch benutzen, damit alles immer in der Mitte bleibt und sich nicht links und rechts verschieben.
Ich habe das mal eingefügt, schau:
Erstmal unter #main_content > min-height: 780px; entfernen.
Dann folgendes hinzufügen/ändern
<style type="text/css">
.infobox {
padding: 15px 10px 15px 40px;
background: url(http://www.ucp.nico-wiss.de/img/info.png);
background-repeat: no-repeat;
background-position: 15px 50%;
}
.infobox p {
color: #fff;
font-size: 16px;
padding-left: 10px;
font-weight: bold;
font-family: arial;
padding-left: 25px;
}
.infoWrapper {
padding: 30px 125px;
padding-left: 0;
}
</style>
<div id="mng_li">
<div id="main_content">
<div class="infoWrapper">
<div class="infobox">
<p>Dein Account wurde noch nicht aktiviert! Hier kannst du deinen Account aktivieren!</p>
</div>
</div>
</div>
</div>
Alles anzeigen
Das sieht dann so aus, einmal normal und raus/rangezoom:
Normal: https://s3.amazonaws.com/fvd-d…219036-KavfLC/screen.jpeg
Gezoomt: https://s3.amazonaws.com/fvd-d…219035-igHody/screen.jpeg