CSS - Displaying boxes on separate rows - css

Question

Im trying to display my posts on serperate rows, but they keep overflowing the bounds of the container. I tried setting the width of of parent to a minimum, but it still overflows. heres a link to my blog site
www.darealistmedia.com
There you can see my problem. And heres the my CSS file. "Main" is the container im trying to keep them in.
* {
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;
}
What am I doing wrong?

Answer 1

This behaves exactly as it is supposed to. You told the postWrapper to have a height of 270px, and it does, even if the content is larger. You could use overflow: hidden; to hide the extra content, but this will cut off your content mid-sentence. Possibly better to replace height: 270px; with min-height: 270px;:
.postWrapper {
border:2px solid red;
padding:5px;
margin:11px;
width:270px;
min-height:270px;
}