I'm trying to create a Button with an Image on the Right side. But when I set the width of my innerContainer to auto it choses the maximum width.
To realize this, there was a need to create some wrappers.
div.container {
max-width: 240px;
width: auto;
border: 5px solid #cd8102;
border-radius: 3px;
height: 36px;
background: linear-gradient(#fcbf00, #f39600); /* Standard syntax */
font-family: 'PT Sans',sans-serif;
color: black;
font-size: 16px;
text-decoration: none;
}
div.container:hover{
background: linear-gradient(yellow, #f39600); /* Standard syntax */
}
div.innerContainer{
width: 90%;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
div.box1 {
box-sizing: border-box;
width: 207;
max-width: 207px;
/*border: 1px solid red; */
border: 1px solid yellow;
float: left;
height: 36px;
text-align: center;
padding-right: 6px;
padding-left: 10px;
}
div.box2 {
box-sizing: border-box;
width: 20px;
height: 20px;
margin-top: 8px;
text-align: center;
border: 1px solid blue;
float: left;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
#TextInTheMiddle {
text-align: center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
height: 36px;
border: 1px dotted red;
}
<a href="http://www.google.de" >
<div class="container">
<div class="innerContainer">
<div class="box1">
<span id='TextInTheMiddle'>Weiter Einkaufen</span>
</div>
<div class="box2">
<span>
<img id="img" src="file:///Y|/Button/images/icons/next.png" height="20" width="20">
</span>
</div>
<div style="clear:both;"></div>
</div>
</div>
</a>
The black border should ending with the blue one on the right side and also be centered within the button. I can be viewed in the js fiddle Demo.