Menu
Given this simplified snippet :
<html>
<body>
<div>
<div style='text-align:center;'>asdfaskjdfakjsd</div>
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
</div>
</body>
</html>
The button floats to the right, but below the text(On the next line). I know I can realign it using relative positioning, but is there a correct way of having both on the same line.
Even better if adding the button on the right would not effect the centre align of the text. ie it does not get pushed to the left.
356
You can switch the order of the two divs:
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
<div>asdfaskjdfakjsd</div>
As long as you don't mind them being in reverse order.
Here's a fiddle to demonstrate this effect. The fourth example shows the divs reversed.
94
I apologize for jumping around. I noticed that even with the reversed divs, the text didn't appear completely centered.
Here is yet another solution (5th example): http://jsfiddle.net/tracyfu/zYzqr/
#method5 {
position: relative;
}
#method5 .submit {
position: absolute;
right: 0;
top: 0;
}
The only problem with this is that if you're not careful, or your text is dynamic, it could collide with the absolutely positioned submit.
44
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
