Есть родительский элемент .inputfields
, у которого есть блок #buttonsleft
, из трех кнопок, выравненный по левому краю, и #buttonsright
, который должен быть выравнен по правому краю.
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p, h1, form, button {
border: 0;
margin: 0;
padding: 0;
}
.mystyle {
border: solid 2px burlywood;
background-color: antiquewhite;
border-radius: 5px;
}
.inputfields {
display: inline;
}
.mystyle h1 {
text-align: center;
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
#buttonsright {
float: right;
width: 30%;
}
#buttonsleft {
float: left;
width: 30%;
}
#buttonsleft input {
font-size: 12px;
padding: 4px 2px;
border: solid 1px burlywood;
width: 100%;
margin: 2px 0 20px;
border-radius: 5px;
display: block;
}
#buttonsright input {
font-size: 12px;
padding: 4px 2px;
border: solid 1px burlywood;
width: 100%;
margin: 2px 0 20px;
border-radius: 5px;
display: block;
}
<div class="mystyle">
<h1>All values</h1>
<div class="inputfields">
<div id="buttonsleft">
<INPUT TYPE="BUTTON" VALUE="<1-1>" ONCLICK="">
<INPUT TYPE="BUTTON" VALUE="<1-2>" ONCLICK="">
<INPUT TYPE="BUTTON" VALUE="<1-3>" ONCLICK="">
</div>
<div id="buttonsright">
<INPUT TYPE="BUTTON" VALUE="<2-1>" ONCLICK="">
<INPUT TYPE="BUTTON" VALUE="<2-2>" ONCLICK="">
<INPUT TYPE="BUTTON" VALUE="<2-3>" ONCLICK="">
</div>
</div>
Проблема в позиционировании #buttonsright
. Они либо выстраиваются по вертикали с левого края, либо же с правого, но ниже чем кнопки из блока #buttonsleft
. Собственно вопрос - как сделать чтобы блоки кнопок располагались ровно напротив друг друга?
При этом все элементы находятся .mystyle и, при использовании float, выпадают за границы mystyle