Позиционирование блоков css, сдвиг вниз

.news { 
  float: left; 
  width: 10%; 
  height: 35%; 
  background: rgb(240, 244, 230); 
} 
 
.name {       
  height: 4%; 
  width: 10%; 
  background: rgb(255, 233, 217); 
  color: rgb(255, 156, 78); 
} 
.name2 { 
  float: left;   
     } 
 
.first 
{float: right;     
background:  rgb(233, 236, 240);   
   width:24.3%;    
   margin-bottom:1%; 
   margin-right:6%; 
   padding-left:1%; 
   padding-top:0.6%; 
   padding-bottom: 0.6%; 
   height:3.5%;    
   text-align: auto;    
   overflow: hidden; 
   } 
.second{ 
padding: 1px ; 
overflow: hidden; 
margin-right:6%; 
float:right; 
color:black; 
text-decoration: none;       
 text-align: auto;        
   margin-bottom:2%; 
   width:25%; 
   height:33%; 
   display: block; 
   border:1px solid black; 
 clear: right;} 
   .second img { 
       float:left;           
      height:100%; 
      width:50%; 
   }

<link rel='stylesheet' href='style.css'> 
<div class="name"><div class="name2">News</div></div> 
<div class="news"> 
 
</div> 
<div class="first"><a href =# >Sidelist</a> </div> 
 
    <div class="second"> 
    Sidelist 
    
    
    </div>