centering a div!

[insei]

my code is 100% validated, both css and html

i simply cant center something which is really frustrating becouse i thought i was past these kinds of small things long time ago...


#registration_submitButtonAndErrorMsgContainer {
overflow: hidden;
background-color: blue;
margin: 13px 0px 0px 12px;
}
#registration_submitButton {
float: left;
width: 141px;
height: 36px;
background: url("../images/frontpage/input_submitRegisterOff.jpg");
border: 0;
padding: 0;
margin-left: 8px;
}
#registration_submitButton:hover {
background: url("../images/frontpage/input_submitRegisterOn.jpg");
}
#registration_errorMsgOuter {
float: left;
height: 34px;
width: 413px;
background-color: #ffdddd;
border: 1px solid #990000;
}

#registration_errorMsgInner {
margin: 0px auto 0px auto;
background-color: #fff;
}


html code


<div id="registration_submitButtonAndErrorMsgContainer">
<div id="registration_errorMsgOuter">
<div id="registration_errorMsgInner">Vennligst fyll inn alle felt</div>
</div>
<input id="registration_submitButton" type="submit" name="registration_submit" value="">
</div>


this is how it looks:

http://www.xgs-gaming.com/error.jpg

i really hope i can get past this becouse this thing has been keeping me for 2 hours..

regards,
alex

[insei]

it seems like it is becouse the inner div does not have a fixed with

[Kor]

it seems like it is becouse the inner div does not have a fixed with
Yeap. auto margin values have sense only in case of well defined sized block elements.

[insei]

how can i make the size dependent of the lenght of the text? i want the text to be centered with an image on the left side of it.

[insei]

an exclamation img in front of the text, and i want it all to be centered, but the text is not fixed, so i cannot have a fixed width. any suggestions about how to fix it?

should i use <center></center>?

[insei]

#registration_submitButtonAndErrorMsgContainer {
overflow: hidden;
background-color: blue;
margin: 13px 0px 0px 12px;
}
#registration_submitButton {
float: left;
width: 141px;
height: 36px;
background: url("../images/frontpage/input_submitRegisterOff.jpg");
border: 0;
padding: 0;
margin-left: 8px;
}
#registration_submitButton:hover {
background: url("../images/frontpage/input_submitRegisterOn.jpg");
}
#registration_errorMsgContainer {
overflow: hidden;
float: left;
height: 34px;
width: 413px;
background-color: #ffdddd;
border: 1px solid #990000;
}

#registration_errorMsg {
float: left;
margin: 0;
background-color: #fff;
}

img#registration_exclamation {
float: left;
border: 0px;
margin: 0;
}



<div id="registration_submitButtonAndErrorMsgContainer">
<div id="registration_errorMsgContainer">
<center>
<img id="registration_exclamation" src="images/frontpage/registration_exclamation.png" alt="">
<div id="registration_errorMsg">Vennligst fyll inn alle felt</div>
</center>
</div>
<input id="registration_submitButton" type="submit" name="registration_submit" value="">
</div>


http://www.xgs-gaming.com/error.jpg

even <center></center> doesnt work!

[insei]

i can use the exclamation mark as a background left positioned on my div where the text is, but i still need to center that div without it having a fixed width, becouse the text will be dynamic

[insei]

it seems like i cant use margin or padding on inline elements, damn this was my last hope! :D

[insei]

i gave this up and went on doing it with good oldschool tables :P

works on ff op ch ie

http://www.xgs-gaming.com/error2.jpg