CSS - Отображение полей в отдельных строках

Question

Im пытается отобразить мои сообщения в строгих строках, но они продолжают переполнять границы контейнера. Я попытался установить минимальную ширину родителя, но он все еще переполняется. Heres ссылку на мой блог-сайт

www.darealistmedia.com

Там вы можете увидеть мою проблему. И heres мой файл CSS. «Главная» - контейнер, который пытается их удержать.

* { 
    margin:0px; 
    padding:0px; 
} 
h1 { 
    font:bold 20px Tahoma; 
} 
h2 { 
    font:bold 14px Tahoma; 
} 
header, section, footer, aside, nav, article, hgroup { 
    display:block; 
} 
body { 
    width:100%; 
    display:-webkit-box; 
    -webkit-box-pack:center; 
} 
.holder { 
    max-width:1000px; 
    margin:15px 0; 
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex:1; 
} 
header { 
    background:yellow; 
    border:3px solid black; 
    padding:auto; 
    /*20*/ 
} 
.navigation { 
    border:3px solid black; 
    background:blue; 
    color:white; 
    padding:10px; 
    text-align:center; 
} 
.navigation div { 
    display:inline-block; 
} 
.new_div { 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
} 
.main { 
    text-align:center; 
    border:4px solid orange; 
    -webkit-box-flex:1; 
    margin:20px; 
    padding:20px; 
} 
.right-sidebar { 
    border:1px solid red; 
    width:220px; 
    margin:20px; 
    margin: background:#66cccc; 
} 
footer { 
    text-align:center; 
    padding:20px; 
    border-top:2px solic green; 
} 
/*Post Styles*/ 
.postSection { 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    width:800px; 
    overflow:scroll; 
} 
.postWrapper { 
    border:2px solid red; 
    padding:5px; 
    margin:11px; 
    width:270px; 
    height:270px; 
} 
.postTitle { 
    background-color:#303030; 
    font-size:28px; 
    font-weight:bold; 
    font-family:Trajan Pro; 
    color:white; 
    padding:5px; 
} 
.postContent { 
    background:#c7c7c7; 
} 
.postTabs { 
    text-align:center; 
    background-color:#202020; 
    float:left; 
    color:white; 
    padding:5px; 
} 
.day { 
    font-size:30px; 
} 
.linkList { 
    float:right; 
} 

Что я делаю неправильно?

Answer 1

Это ведет себя точно так, как предполагается. Вы сказали postWrapper иметь высоту 270 пикселей, и это действительно так, даже если содержимое больше. Вы можете использовать overflow: hidden;, чтобы скрыть дополнительный контент, но это отключит ваш контент в середине предложения. Возможно, лучше заменить height: 270px; с min-height: 270px;:

.postWrapper { 
    border:2px solid red; 
    padding:5px; 
    margin:11px; 
    width:270px; 
    min-height:270px; 
}