Menu
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; } 
655
Since <span> is an inline element, using a <span> within another <span> is valid. The <span> element along with the id and class attributes offers a generic mechanism to add structure to documents. It defines the content to be inline, but does not require any other presentational idiom on the content.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.
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/
108
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/
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
