Как выровнять два столбца рядом друг с другом

Question

Это проблема позиционирования? https://jsfiddle.net/zhuc6ma0/

.container-01 { 
 
position: absolute; 
 
float: left; 
 
margin: 20px 40px; 
 
width: 380px; 
 
height: 160px; 
 
border-left: 2px solid black;  
 
opacity: .5; 
 
background: #555; /* For browsers that do not support gradients */ 
 
    background: -webkit-radial-gradient(circle,white, grey, black); /* Safari */ 
 
    background: -o-radial-gradient(circle, white, grey, black); /* Opera 11.6 to 12.0 */ 
 
    background: -moz-radial-gradient(circle, white, grey, black); /* Firefox 3.6 to 15 */ 
 
    background: radial-gradient(circle, white, grey, black); /* Standard syntax */ 
 
z-index: 5; 
 
} 
 

 
.container-01-box { 
 
    float: left; 
 
margin: 40px 40px; 
 
width: 380px; 
 
height: 10px; 
 
opacity: .5; 
 
z-index: 50; 
 
border: 1px solid black; 
 
background: #555; /* For browsers that do not support gradients */ 
 
    background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */ 
 
    background: -o-radial-gradient(circle, black, grey, white); /* Opera 11.6 to 12.0 */ 
 
    background: -moz-radial-gradient(circle, black, grey, white); /* Firefox 3.6 to 15 */ 
 
    background: radial-gradient(circle, black, grey, white); /* Standard syntax */ 
 
} 
 

 
#trident-left { 
 
float: left; 
 
top: 0; 
 
left: 0; 
 
z-index: 100; 
 
} 
 

 

 
/* -----------------RIGHT CONTAINER TOP (NIGHTMARE) 
 

 
*/ 
 

 
.container-02 { 
 
    position: relative; 
 
float: right; 
 
margin: 20px 40px; 
 
width: 380px; 
 
height: 160px; 
 
border-right: 2px solid black;  
 
opacity: .5; 
 
background: #555; /* For browsers that do not support gradients */ 
 
    background: -webkit-radial-gradient(circle, white, grey, black); /* Safari */ 
 
    background: -o-radial-gradient(circle, white, grey, black); /* Opera 11.6 to 12.0 */ 
 
    background: -moz-radial-gradient(circle, white, grey, black); /* Firefox 3.6 to 15 */ 
 
    background: radial-gradient(circle, white, grey, black); /* Standard syntax */ 
 
z-index: 5; 
 
} 
 

 
.container-02-box { 
 

 
clear: both; 
 
display: inline-block; 
 
float: right; 
 
margin: 40px 40px; 
 
width: 380px; 
 
height: 10px; 
 
opacity: .5; 
 
z-index: 50; 
 
border: 1px solid black; 
 
background: #555; /* For browsers that do not support gradients */ 
 
    background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */ 
 
    background: -o-radial-gradient(circle, black, grey, white); /* Opera 11.6 to 12.0 */ 
 
    background: -moz-radial-gradient(circle, black, grey, white); /* Firefox 3.6 to 15 */ 
 
    background: radial-gradient(circle, black, grey, white); /* Standard syntax */ 
 
} 
 

 

 
#trident-right { 
 
float: right; 
 
top: 0; 
 
left: 0;

<h1 id="name-of-dream">"The ships from Nova"</h1> 
 
<div class="container-01"><img src="images/triangle-01.png" id="trident-left"> 
 
</div> 
 
<div class="container-01-box"> 
 
</div> 
 
    
 
<div class="container-02"><img src="images/triangle-01.png" id="trident-right"> 
 
</div> 
 
<div class="container-02-box"> 
 
</div>

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

Answer 1

Если поместить DIV внутри другого DIV работает лучше:

<h1 id="name-of-dream">"The ships from Nova"</h1> 
<div class="container-01"> 
    <img src="images/triangle-01.png" id="trident-left"> 

    <div class="container-01-box"> 
    </div> 
</div> 

<div class="container-02"> 
    <img src="images/triangle-01.png" id="trident-right"> 

    <div class="container-02-box"> 
    </div> 
</div> 

CSS:

.container-01 { 
position: relative; 
float: left; 
margin: 20px 40px; 
width: 40%; 
height: 160px; 
border-left: 2px solid black;  
opacity: .5; 
background: #555; /* For browsers that do not support gradients */ 
    background: -webkit-radial-gradient(circle,white, grey, black); /* Safari */ 
    background: -o-radial-gradient(circle, white, grey, black); /* Opera 11.6 to 12.0 */ 
    background: -moz-radial-gradient(circle, white, grey, black); /* Firefox 3.6 to 15 */ 
    background: radial-gradient(circle, white, grey, black); /* Standard syntax */ 
z-index: 5; 
} 



.container-01-box { 
    float: left; 
/* margin: 40px 40px; */ 
width: 100%; 
height: 10px; 
opacity: .5; 
z-index: 50; 
border: 1px solid black; 
background: #555; /* For browsers that do not support gradients */ 
    background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */ 
    background: -o-radial-gradient(circle, black, grey, white); /* Opera 11.6 to 12.0 */ 
    background: -moz-radial-gradient(circle, black, grey, white); /* Firefox 3.6 to 15 */ 
    background: radial-gradient(circle, black, grey, white); /* Standard syntax */ 
} 

#trident-left { 
float: left; 
top: 0; 
left: 0; 
z-index: 100; 
} 


/* -----------------RIGHT CONTAINER TOP (NIGHTMARE) 

*/ 

.container-02 { 
    position: relative; 
float: right; 
margin: 20px 40px; 
width: 40%; 
height: 160px; 
border-right: 2px solid black;  
opacity: .5; 
background: #555; /* For browsers that do not support gradients */ 
    background: -webkit-radial-gradient(circle, white, grey, black); /* Safari */ 
    background: -o-radial-gradient(circle, white, grey, black); /* Opera 11.6 to 12.0 */ 
    background: -moz-radial-gradient(circle, white, grey, black); /* Firefox 3.6 to 15 */ 
    background: radial-gradient(circle, white, grey, black); /* Standard syntax */ 
z-index: 5; 
} 

.container-02-box { 

clear: both; 
display: inline-block; 
float: right; 
/* margin: 40px 40px; */ 
width: 100%; 
height: 10px; 
opacity: .5; 
z-index: 50; 
border: 1px solid black; 
background: #555; /* For browsers that do not support gradients */ 
    background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */ 
    background: -o-radial-gradient(circle, black, grey, white); /* Opera 11.6 to 12.0 */ 
    background: -moz-radial-gradient(circle, black, grey, white); /* Firefox 3.6 to 15 */ 
    background: radial-gradient(circle, black, grey, white); /* Standard syntax */ 
} 


#trident-right { 
float: right; 
top: 0; 
left: 0; 
z-index: 100; 
}