Правильный ли сам подход с построению? [18/18] 93%

Курсы §14. Мастерская: декоративные элементы
1 
 <body>
        <div class="left">
            <div class="post-date">13.09</div>
            <div class="brackets"></div>
        </div>
        <div class="post">
            <div class="post-title">Интенсив: программа</div>
            
            <div class="post-type"></div>
            <div class="post-author">
                Автор: <a href="#">HTML Academy</a>
            </div>
            <div class="post-stats5">
                <div class="icon icon-comments"></div>
                <a href="#">5</a>
                <div class="talks"></div>
            </div>
            <div class="post-stats">
                <div class="icon icon-tags"></div>
                <a href="#">интенсив</a>,
                <a href="#">программа</a>
            </div>
           <div class="post-text">Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.</div>
        </div>
    </body>

/
/
.left {
float: left;
height: 300px;
width: 85px;
margin: 0;
padding: 0;
}

.post-date {
display: block;
border-bottom: 4px solid #bdc3c7;
width: 39px;
height: 20px;
margin-left: 10px;
margin-top: 50px;
background-color: #ffffff;
font-size: 15px;
font-weight: bold;
color: #7f8c8d;
padding: 19px 8px
}

.brackets {
background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
width: 55px;
height: 55px;
border-bottom: 4px solid #bdc3c7;
margin-top: 10px;
margin-left: 10px;
}

.post-title {
color: #2980b9;
font-size: 20px;
padding-left: 85px;
padding-top: 50px;
}

.post-author {
padding-top: 5px;
font-size: 12px;
}

.post-author a {
text-decoration: none;
color: #2980b9;
}

.post-stats5 {
float: right;
position:relative;
padding-right: 35px;
padding-top: 5px;
}

.icon-comments {
position: absolute;
left: -20px;
width: 15px;
height: 15px;
background: url("/assets/course14/post-challenge.png") no-repeat -20px 0;
}

.post-stats {
position: relative;
top: 5px;
right: -21px;
float: left;
padding: 0;
margin: 0;
}

.post-stats a {
text-decoration: none;
font-size: 12px;
color: #2980b9;
}

.post-stats5 a {
text-decoration: none;
color: #2980b9;
}

.icon-tags {
position: absolute;
left: -20px;
width: 15px;
height: 15px;
background: url("/assets/course14/post-challenge.png") no-repeat 0 0;
}

.post-text {
width: 165px;
height: 100px;
background: #ffffff;
margin-left: 85px;
padding: 10px 15px;
font-size: 12px;
margin-top: 20px;
border-bottom: 4px solid #bdc3c7;
}

.post-stats .icon {
width: 15px;
height: 15px;
}

Зафлотил блок слева во все высоту для двух картинок - времени и ковычек, остальное справа верстал.

Алгоритм верный?

Кто как делал, расскажите.

4 
<div class=“post-type”></div>   /* ничего не делает */

Я обходился без float.
Всё сместил padding-left: 75px;
А, дату и кавычки сместил абсолютно позиционированными.

1 лайк