2 divs влево, другие divs вправо

Question

Я пытаюсь поплавать 2 divs на левой стороне и два div на правой стороне. Все divs мне нужно иметь в одном родительском div.

Мой CSS:

.news { 
    width:50%; 
    float:right !important; 
} 
.news:first-child { 
    float:left; 
} 
.news:nth-child(2) { 
    float:left; 
} 

Мой HTML:

<div class="maindiv"> 
    <div class="news"> 
    <img src="fileadmin/user_upload11150532_956775297674176_4405300320161350202_n.jpg"> 
    <h2>aaaaaa4</h2> 
    </div> 
    <div class="news"> 
    <img src="fileadmin/user_upload11150532_956775297674176_4405300320161350202_n.jpg"> 
    <h2>aaaaaa4</h2> 
    </div> 
    <div class="news"> 
    <img src="fileadmin/user_upload/11150532_956775297674176_4405300320161350202_n.jpg"> 
    <h2>aaaaaa4</h2> 
    </div> 
</div> 

How it looks now

How it should look like

Answer 1

почему бы вам не сделать еще один элемент, как

.row{clear:both;} 
 
.image {float:left;width:50%;} 
 
.image-details {float:right;width:50%;} 
 
.image img {display:block;height:auto;width:100%;}

<div class="parent"> 
 
    <div class="row clearfix"> 
 
    <div class="image"><img src="http://placehold.it/350x150"></div> 
 
    <div class="image-details">some details <br>some details <br>some details <br></div> 
 
    </div> 
 
    <div class="row clearfix"> 
 
    <div class="image"><img src="http://placehold.it/350x150"></div> 
 
    <div class="image-details">some details <br>some details <br>some details <br>some details <br></div> 
 
    </div> 
 
</div>

Answer 2

Попробуйте распределить их слева и справа чередующиеся:

.news:nth-child(odd) { 
    float:left; 
} 
.news:nth-child(even) { 
    float:right; 
}