Getting divs to sit side by side in responsive site

Question

I want to preface my request by apologizing for asking a question that has already been asked; I've tried a lot of the suggestions I've seen and been unsuccessful in getting my code to work.

Onto my question: I'm trying to get four divs to position themselves side by side whenever possible on my Wordpress site starting from when the screen width is 1030px or smaller. My layout is responsive, and my divs are 300px wide, so I don't want them to sit adjacent to each other if they will break their container (i.e. if the container's width is 340px, I don't want the divs to be next to each other; I want to see the divs stacked on top of each other. If the container's width is 800px, I want a 2x2 grid of divs).

My site (the divs are the green blocks): http://coolnewssite.com/

Html for the divs (the "sidebar" is the container):

<aside id="sidebar" class="span4">
<div class="widget-area" role="complementary">
    <aside id="text-18" class="widget widget-1 odd default widget_text clearfix">           
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
    <aside id="text-3" class="widget widget-2 even default widget_text clearfix">             
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
    <aside id="text-17" class="widget widget-3 odd default widget_text clearfix">           
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
    <aside id="text-19" class="widget widget-4 even default widget_text clearfix">          
            <div class="textwidget">
                <a href="http://www.google.com"><img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg"></a>
            </div>
    </aside>
</div>
</aside>

Any clues as to how to set this up? I've tried fiddling with display: inline-block and float:left, but so far, no luck. Thanks in advance for your help!

Answer 1

At the breakpoint you want them to sit side by side, try the following:

// This will tell the sidebar to be full-width rather than the set 300px
aside#sidebar {
    width:100%;
}

.widget {
    // This sets the max-width of the ad area to 50%
    max-width: 50%;
    // This tells the browser to put the border and any padding inside the max-width
    box-sizing: border-box;
    // This will sit the elements next to each other
    float: left;
}

.textwidget {
   // This overrides the 300px width on the inner div 
   width: auto;
}