How to position few span's under each other

Question

I want to position two span's and a button like so:

span1

span2

button

But, with my current code they look like this:

span1 span2 button

body { text-align:center; } span#printHere { color:black; font-size:30px; position:relative; } span#triesLeft{ align='centre'; font-size:30px; position:relative; } 

Answer 1

Try:

span {   float: left;   clear: left; } button {   float: left;   clear: left; } button:hover {   background-image: url('imageurl'); } 

clearing after a float will cause the span to drop to a new line. http://jsfiddle.net/aKmF6/

Answer 2

span are inline elements. If you want them positioned under each other use a block element or style it with display:block

http://jsfiddle.net/xfyS4/