Automatically resize items when minimizing window - html

Question

Hello i'm working on a project and i got a problem.
My "items" (which are divs) get out of the container when i minimize my window.
My code is a bit weird but it's working so far, here's where are my items.
<div class="containerpage">
<div class="container">
<div class="artcontainer">
<div class="row">
<div class="container">
<div class="col-md-10">
<div class="col-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b><br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">January 20th, 2014</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Read more
</div>
</div>
</div>
</div>
</div>
<!-- Same col-sm-4 col-md-4 several times on col-md-10 that make my "thumbnails"-->
<div class="col-md-2">
<!-- Image that you can see on the right -->
</div>
</div>
</div>
</div>
</div>
Now what i get when i minimize my window : http://i.stack.imgur.com/wid7y.jpg
As you can see my blocs (HTML5) are outside of the container, plus there's a grey space at the right that blocks another image (which is in the col-md-2), can this be from a margin or padding on the body or main part ?
Every other elements on the site automatically resize themselves but no this part, where is my mistake ? Is this from the CSS ?
I'd actually like my items not to be smaller when i minimize but instead having one by row automatically when minimizing.
-- Also i've always used col-md most of the times, is there an equivalence for smaller screens that i should precise when i make my col ?
I hope i've been clear enough (:

Answer 1

Try adding the following line to your css class for the DIV elements:
display: inline-block;
This should make the DIVs to go down a row if they don't have enough room.

Answer 2

You can achieve spacing between columns using the col-xs-* classes,within in a col-xs-* div coded below. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
( Note : You can Use col-xs-* or col-md-* or col-sm-* . i used col-xs-*)
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>

Answer 3

Great Keval Bhatt, i changed width px to % and it worked almost perfectly !
I also tried display: inline-block; but when i minimized, my items were "behind" the container so they disappeared.
Changing px to % worked, thanks again ! (: