Andrus Andrus - 4 months ago 7
HTML Question

How to render anchor element always below button

Bootstrap 3 shopping cart contains button and a element:

<input type="submit" value="Lisa ostukorvi" class="btn btn-success details-addtocartbutton">
<a href="/Store/AddToWishList?Product=101033" tabindex="0" role="button" class="helper-addtowishlist">Lisa lemmikutesse</a>


Depending on screen resolution, a element appears in next line or immendiately after button

How to force a element to appear always below button:

enter image description here

Answer

If you have the width of the button - say 100 pixels.

button {
   width:100px;
   float:right;
}

Put a clearfix div beneath your button and then you can put your anchor tag in a paragraph and set the width of it to be the same as the button

p a {
   width:100px;
   float:right;
}

If you were to float both the button and the paragraph to the right then the anchor would always be beneath the button.

Here is a fiddle https://jsfiddle.net/132cyzve/3/