I have two buttons
<button class="upgradebutton1" id="upupgrade1" onclick="browse_aww()">Browse /r/aww</button> <pr id="priceuno"> 5 </pr> <img id="upvotepicture" width=13px src="http://image.spreadshirt.com/image-server/v1/designs/12018562,width=178,height=178/Upvote-style-arrow.png"></img>
<button class="upgradebutton1" id="downupgrade1" onclick="grow_a_neckbeard()">Grow a neckbeard</button> <pr2 id="price2"> 5 </pr2> <img id="downvotepicture" width=13px src="http://wp.iosfans.com/wp-content/uploads/2013/02/Down-vote-arrow-237x250.png"> </img>
Whenever I click the browse_aww button, the grow_a_neckbeard button slides over where the first button used to be. This is a problem with all of my upgrade buttons on the page. I've tried using css to set the position to Absolute, but that does nothing and glitches the entire thing.
Any and all help is appreciated
jsfiddle link: http://jsfiddle.net/DayDreamKiddo/zk6F4/7/
If you set position to absolute you remove the box from the normal flow, so the other elements arranges like it never existed. You should create an identical box to replace the old one, but I think it's easier to simply disable the button, or at least set its visibility to hidden (which doesn't affect the normal flow).