Как разместить два divs бок о бок

Question

как я поместил их в divs бок о бок, я посмотрел онлайн и на других форумах, но они казались немного запутанными, потому что мой код создает «бумажный» эффект, а их нет так что я действительно застрял в этот момент .. любое тело знает, как это сделать? У меня есть jsfiddle HERE

этот сайт он заставляет меня размещать код, чтобы включить JS скрипку так вот код

/** Playstation **/ 
.info, .info:before, .info:after 
{ 
background-color: blue; 
border: 1px solid #ccc; 
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); 
} 

.infops 
{ 
position: relative; 
width: 50%; 
padding: 2em; 
margin: 50px auto; 
} 

.infops:before, .infops:after 
{ 
content: ""; 
position: absolute; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
-webkit-transform: rotateZ(2.5deg); 
-o-transform: rotate(2.5deg); 
transform: rotateZ(2.5deg); 
z-index: -1; 
} 

.infops:after 
{ 
-webkit-transform: rotateZ(-2.5deg); 
-o-transform: rotate(-2.5deg); 
transform: rotateZ(-2.5deg); 
} 

.infops h1 
{ 
    font-size: 1.8em; 
font-weight: normal; 
text-align: center; 
padding: 0.2em 0; 
margin: 0; 
border-top: 1px solid #ddd; 
border-bottom: 2px solid #ddd; 
} 

.infops p 
{ 
text-align: left; 
margin: 1.5em 0; 
} 
/**xbox**/ 
.infoxbox, .infoxbox:before, .infoxbox:after 
{ 
background-color: orange; 
border: 1px solid #ccc; 
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); 
} 

.infoxbox 
{ 
position: relative; 
width: 50%; 
padding: 2em; 
margin: 50px auto; 
} 

.infoxbox:before, .infoxbox:after 
{ 
content: ""; 
position: absolute; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
-webkit-transform: rotateZ(2.5deg); 
-o-transform: rotate(2.5deg); 
transform: rotateZ(2.5deg); 
z-index: -1; 
} 

.infoxbox:after 
{ 
-webkit-transform: rotateZ(-2.5deg); 
-o-transform: rotate(-2.5deg); 
transform: rotateZ(-2.5deg); 
} 

.infoxbox h1 
{ 
font-size: 1.8em; 
font-weight: normal; 
text-align: center; 
padding: 0.2em 0; 
margin: 0; 
border-top: 1px solid #ddd; 
border-bottom: 2px solid #ddd; 
} 

.infoxbox p 
{ 
text-align: left; 
margin: 1.5em 0; 
} 

А вот мой HTML

<div class="infoxbox"> 
<h1>Xbox</h1> 

</div> 
<div class="info"> 
<h1>Playstation</h1> 

</div> 

Answer 1

это то, что вы хотите?

.infops {float:left;} 

http://jsfiddle.net/c6gus/3/

Answer 2

насчет float: left к infops DIV?

Answer 3

Вы можете использовать display:inline-block как к дивы

.infoxbox{ 
    display:inline-block 
} 

.info{ 
    display:inline-block; 
} 

Fiddle

Answer 4

.infoxbox{display: inline-block;} 
.infops{display: inline-block;} 

Answer 5

Вы можете использовать display:inline-block. Я использовал встроенный атрибут стиля для демонстрации

DEMO

Answer 6

Вы просто должны использовать float: left для одной стороны и float:right за другой.

Answer 7

Другой альтернативой является использование таблицы:

<table width="100%"> 
<td> 
<div class="infoxbox"> 

<h1>Xbox</h1> 

</div> 
</td> 
<td> 
<div class="infops"> 

<h1>Playstation</h1> 

</div> 
</td> 
</table> 

http://jsfiddle.net/c6gus/15/