When viewing a website like GameFAQs, you may notice that there are two divs positioned next to each other - the main content and an aside (such as a poll). As you resize the window, the aside sometimes moves down below the main content without leaving any space between them. Instead, the main content simply stretches to fill the area previously occupied by the aside.
I'm attempting to achieve this same layout on my own website, but I keep encountering issues where there is empty space left when the aside is moved down below.
To better illustrate my point, please take a look at this image: Image Link
How can I make my layout behave more like the GameFAQs site?
Below is a snippet of my CSS code:
.container {
width: 75%;
overflow: auto;
border: #FCC;
border-style:double;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;
}
.container .content {
background: #FFF;
width: 75%;
padding: 15px;
float: left;
box-sizing:border-box;
}
.container .archive {
border:#3C9 thick;
border-style:solid;
background: #FFF;
float:left;
width:23%;
padding: 15px;
margin-left:15px;
box-sizing:border-box;
}