Выравнивание данных

Question

Привет, используя следующее кодирование. У меня небольшая проблема. , если вы идете на мою страницу http://freebetoffersonline.com/bet-calc.php и нажмите любой тип ставки, а затем любое число победителей, вы увидите калькулятор, который появляется не выровнен и перекрывает мой слайдер

Я определил его (я думаю), чтобы быть эта часть ниже кодирования

.calculator { 
position:relative; 
background-color:#fff; 
width: 880px; 
text-align:center; 
float:left; 
margin-top: 180px; 
padding: 10px; 
} 

Но когда я затем уменьшить ширину, все это происходит в выравнивании здесь я хочу, чтобы это было, однако нижние 2 коробки (Total Return и общая прибыль) уже не на стороне и один падает на полный уровень.

RR 

Таким образом, вместо того, чтобы смотреть, как 2-R-х выше

R 
R 

Похоже, эти две R-х выше

/* BET CALCLATOR */ 

.bidlist { 
position:absolute; 
background-color:#fff; 
width: 560px; 
text-align:center; 
float:left; 
} 

.bidlist div.row { 
float: left; 
text-align:center; 
width: 25%; 
} 


.calculator { 
position:relative; 
background-color:#fff; 
width: 880px; 
text-align:center; 
float:left; 
margin-top: 180px; 
padding: 10px; 
} 


.betbutton{ 
color: white; 
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
border-style:solid; 
border-color:#FDF382 #FFEE30 #ffea00 #FDEE42; 
border-width:3px 4px 4px 3px; 
width:9em; 
height:2em; 
background:#128F01; 
line-height:2; 
text-align:center; 
font-weight:900; 
padding: 5px; 
width: 93%; 
cursor: pointer; 
font-family: Aller, Arial; 
font-size: 14px; 
} 

.betbutton:hover{ 
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42; 
border-width:4px 3px 3px 4px; 
text-shadow: 0 1px 1px #ffea00; 
color:#FFFFFF; 
padding: 5px; 
} 

.unitstake { 
    border:2px solid #bbbbbb; 
text-align: center; 
height:80px; 
z-index:15; 
margin: 0 40% 0 40%; 
} 

.unitstake div.head{ 
border-bottom: 1px solid #cccccc; 
} 

.oddselection{ 
    /*border:2px solid #bbbbbb;*/ 
text-align: center; 
z-index:15; 
margin: 0 30% 0 30%; 

} 

.oddselection div.head{ 
float: left; 
width: 100%; 
} 


.oddselection div.left{ 
border:2px solid #bbbbbb; 
float: left; 
width: 33%; 
} 

.oddselection div.left div.head{ 
border-bottom: 1px solid #cccccc; 
} 

.oddselection div.left div.row{ 
height: 30px; 
} 
.oddselection div.left div.row1{ 
height: 60px; 
} 

.oddselection div.right{ 
border:2px solid #bbbbbb; 
float:right; 
width: 63%; 
} 

.oddselection div.right div.head{ 
border-bottom: 1px solid #cccccc; 
} 


.oddselection div.right div.row{ 
height: 30px; 
} 

.oddselection div.right div.row1{ 
height: 60px; 
} 



.betamountinput{ 
border:1px solid #456879; 
border-radius:3px; 
height: 22px; 
width: 100px; 
padding: 0 0 0 10px; 
} 



.betoddinput{ 
border:1px solid #456879; 
border-radius:3px; 
height: 20px; 
width: 50px; 
padding: 0 0 0 5px; 
margin-left: 5px; 
margin-right: 5px; 
margin-top: 1px; 
margin-bottom: 1px; 
} 


.calculate{ 
text-align: center; 
z-index:15; 
margin: 0 30% 0 30%; 

} 

.btnCalculate { 
height: 35px; 
width: 100%; 
display: block; 
text-align: center; 
font-family: Aller, Arial; 
font-size: 14px; 
color: #fff; 
text-decoration: none; 
background-color: #0C5A01; 
cursor: pointer; 
float: left; 
} 

.btnCalculate:hover { 
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42; 
border-width:4px 3px 3px 4px; 
} 


.result1{ 
    /*border:2px solid #bbbbbb;*/ 
text-align: center; 
height:80px; 
z-index:15; 
margin: 0 30% 0 30%; 

} 

.result1 div.head{ 
float: left; 
width: 100%; 
} 


.result1 div.left{ 
border:2px solid #bbbbbb; 
float: left; 
width: 48%; 
} 


.result1 div.left div.head{ 
border-bottom: 1px solid #cccccc; 
} 

.result1 div.right{ 
border:2px solid #bbbbbb; 
float:right; 
width: 48%; 
} 

.result1 div.right div.head{ 
border-bottom: 1px solid #cccccc; 
} 

.result2{ 
    /*border:2px solid #bbbbbb;*/ 
text-align: center; 
z-index:15; 
    height:80px; 
margin: 0 20% 0 20%; 

} 

.result2 div.head{ 

float: left; 
width: 100%; 
} 


.result2 div.left{ 
border:2px solid #bbbbbb; 
float: left; 
width: 49%; 
} 

.result2 div.left div.head{ 
border-bottom: 1px solid #cccccc; 
} 

.result2 div.right{ 
border:2px solid #bbbbbb; 
float:right; 
width: 49%; 
} 


.result2 div.right div.head{ 
border-bottom: 1px solid #cccccc; 
} 

.heading1 { 
margin: 0.5em 0 0.5em 0; 
color: #343434; 
font-size: 20px; 
line-height: 20px; 
font-weight: normal; 
text-transform: uppercase; 
font-family: 'Orienta', sans-serif; 
} 


.heading2 { 
margin: 0.5em 0 0.5em 0; 
color: #343434; 
font-weight: normal; 
font-size: 16px; 
line-height: 20px; 
font-family: Aller, Arial; 
} 

.heading3 { 
margin: 0.5em 0 0.5em 0; 
color: #343434; 
font-weight: normal; 
font-size: 12px; 
font-family: Aller, Arial; 
} 



.noofwinners { 
position:relative; 
background-color:#fff; 
width: 560px; 
text-align:center; 
float:left; 
margin-top: 180px; 
padding: 10px; 
} 


.winnerbutton{ 
    margin: 0 30% 0 30%; 
color: white; 
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
border-style:solid; 
border-color:#FDF382 #FFEE30 #ffea00 #FDEE42; 
border-width:3px 4px 4px 3px; 
height:2em; 
background:#0C5A01; 
line-height:2; 
text-align:center; 
font-weight:900; 
padding: 5px; 
cursor: pointer; 
font-family: Aller, Arial; 
font-size: 14px; 
} 

.winnerbutton:hover{ 
border-color: #FDF382 #FFEE30 #ffea00 #FDEE42; 
border-width:4px 3px 3px 4px; 
text-shadow: 0 1px 1px #ffea00; 
color:#FFFFFF; 
padding: 5px; 
} 

Answer 1

Я играл с кодом. Вот последний снимок экрана У меня есть

Очевидно, что если вы хотите правой боковой слайдер, то вам необходимо найти компромисс ширину и высоту калькулятора.

.calculator { 
position: relative; 
background-color: #fff; 
width: 100%; 
text-align: center; 
float: left; 
margin-top: 180px; 
padding: 10px;} 

Это была измененная ширина css до 100%.

Затем уменьшите ширину другого div, т.е. общую ставку и другую. Поскольку много жесткого кодирования там, где процентное отношение пока не так просто. Попробуйте выложить, но вы можете скомпрометировать ширину раздела калькулятора и его содержимого.

Это другие редактирует

.result2 div.right { 
border: 2px solid #bbbbbb; 
float: right; 
width: 48%; 
} 



.result1 div.left { 
border: 2px solid #bbbbbb; 
float: left; 
width: 48%; 
height: 100%; 
} 


.result1 div.right { 
border: 2px solid #bbbbbb; 
float: right; 
height: 100%; 
width: 48%; 
} 

Посмотрите на этой картинке. Это что-то вроде этого вы ищете?