html - CSS with divs and divs on a box? -
i can't find mistake in css. 2 buttons want create, should have 5px margin. button far away. mistake?
.box{ background-color: #dcdcdc; border:; border-radius: 15px; padding: 5px; margin-right:5%; margin-left:auto; margin-top: 10%; min-width: 50%; max-height: 60%; overflow:auto; display: inline-block; } .buttons{ border-width: 2px; border-color: black; border-style: solid; border-radius: 10px 0px 0px 10px; padding:5px; border-right-color: #dcdcdc; background-color: #dcdcdc; margin-top: 11%; margin-left: 30%; max-width: 8%; min-width: 5%; float:left; min-height: 3%; display: inline-block; } .buttons2{ border-width: 2px; border-color: black; border-style: solid; border-radius: 10px 0px 0px 10px; padding:5px; border-right-color: #dcdcdc; background-color: #dcdcdc; margin-top: 5px; margin-left: 30%; max-width: 8%; min-width: 5%; min-height: 3%; float:left; display: inline-block; }
can me? ;) thank attention.
edit: html not interesting :
<div class="box"> <p><b>Übersicht:</b></p> <p>hallo $username! welches quiz möchtest du heute starten?</p> <p>kategorie:</p> <p>Übung:</p> </div> <div class="buttons"> test </div> <div class="buttons2"> test2 </div>
here image:
i re-arranged html put buttons first. gave them container named .buttoncontainer
floats against .box
. , gave 2 buttons same class.
html
<div class="buttoncontainer" > <div class="buttons"> test </div> <div class="buttons"> test2 </div> </div> <div class="box"> <p><b>Übersicht:</b></p> <p>hallo $username! welches quiz möchtest du heute starten?</p> <p>kategorie:</p> <p>Übung:</p> </div>
css
.box{ padding:5px; background-color: #dcdcdc; border-radius: 15px; min-width: 50%; max-height: 60%; overflow:auto; display:inline-block; float:left; } .buttons{ padding:5px; border-width: 2px; border-color: black; border-style: solid; border-radius: 10px 0px 0px 10px; border-right-color: #dcdcdc; background-color: #dcdcdc; display:block; width:auto; margin-top:15px; } .buttoncontainer{ float:left; }
working example: http://jsfiddle.net/l5gmk/3/
Comments
Post a Comment