Расположение нескольких div в другом div

@Dmitri446 · Регистрация: 15.01.2014

Author24 — интернет-сервис помощи студентам

Хочу в одном div(е) сделать 3 колонки из div(ов) в ряд. Одну колонку сделал, с левой стороны, а вторую колонку начинаю делать , но она начинается снизу. Вообщем трудно на словах описать проще скрин глянуть

HTML5

<div class = "wrapper">
        <div class = "aside clearfix s">
             <aside class = "clearfix">
                 <div><h1>НОВОСТИ</h1></div>
                 <div>
                    <article >
                        
                        <img src = "../img/a1.jpg">
                        <header ><h2>Заголовок новЗаголовок новостиЗаголовок новЗаголовок новостиостиости</h2></header>
                    </article>
                     
                     <article>
                        <img src = "../img/z1.jpg">
                         <header><h2>Заголовок новЗаголовок новостиЗаголовок новЗаголовок новостиостиости</h2></header>
                     </article>
                     
                     <article>
                        <img src = "../img/oil_vs.jpg">
                         <header><h2>Заголовок новЗаголовок новостиЗаголовок новЗаголовок новостиостиости</h2></header>
                     </article>
                     
                     <article>
                        <img src = "../img/w.jpg">
                         <header><h2>Заголовок новЗаголовок новостиЗаголовок новЗаголовок новостиостиости</h2></header>
                     </article>
                     
                     <article>
                        <img src = "../img/7.jpg">
                         <header><h2>Заголовок новЗаголовок новостиЗаголовок новЗаголовок новостиостиости</h2></header>
                     </article>  
                     
                     <article>
                        <img src = "../img/Klinton_14448.jpg">
                         <header><h2>Заголовок новЗаголовок новостиЗаголовок новЗаголовок новостиостиости</h2></header>
                     </article>  
                     
                     <article>
                        <img src = "../img/static_doc_news_company.jpg">
                         <header><h2>Заголовок новЗаголовок новостиЗаголовок новЗаголовок новостиостиости</h2></header>
                     </article>  
                 </div>
             </aside>
        </div>
        
        
         <div class = "first-col s ">Этот див переносится вниз</div>
       
        
     
     </div>

CSS

.wrapper{
min-width:980px;
width:1346px;
height:700px;
margin:0 auto;
border:5px solid black;
}
.aside header{
   position:relative;
   top:7px;
}
 
.aside article{
    margin-bottom:13px;
}
.aside img{
    float:left;
    margin-top:5px;
    margin-right:10px;
}
.aside div{
    margin:5px;
}
.aside{
    width:410px;  
}
.first-col{
    display:inline-block;
    width:100px;
}
 
.aside div,article,header:after{
    content:"";
    display:table;
    clear:both;
}
 
.s{
    display:inline-block;
}

P.S. не хотелось бы решать проблему с помощью float:right

@mrtoxas · 18.08.2016, 16:20

Добавьте

CSS

1
2
3

.first-col{
    vertical-align:top;
}

@Dmitri446 · 18.08.2016, 16:24 **[ТС]**

спасибо, я просто новичок, порой простейшее забуду

@Dmitri446 0 / 0 / 0 Регистрация: 15.01.2014 Сообщений: 65
	18.08.2016, 16:24 [ТС]	3
	спасибо, я просто новичок, порой простейшее забуду 0