How to create a simple responsive layout with navigation and image gallery?

Question

I have a problem with my code. My task is to create an image gallery that is responsive. And I am not good enough in CSS. I search for another tutorials and I apply it with my code. I am creating a 4 column image gallery of products. And beside the gallery is a simple navigation menu. So I have 2 columns. One is for sidebar and second is the gallery. Here's my sample code.

In my CSS i have this

.menu_navigation {

    position: relative;
    float: left;
    width: 20%;
    height: 100%;
    border-style: solid;
    border-color: red;
    border-width: 2px;
}

.product_selection: {

    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    padding: 10px;
    color: #000000;

} 

.product_image {
    height: 100;
    width: 100;
}

#wrap {
    overflow: hidden;
    margin: 10px;
}

.box {
    width: 20%;
    padding-left: 10%;
    padding-bottom: 30%;
    color: #FFF;
    position: relative;
    float: left;
}

.innerContent {
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background: #FFF;
    padding: 5px;

}

In my HTML I have this

<div class="page" id="wrap">

<!-- navigation categories -->
<div class="menu_navigation">

    <ul class="menu" style="padding: 10px">
        <li>
            <a href="">DISPLAY FORMAT</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">COLOR</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />BLACK</a></li>
                <li><a><input type="checkbox" />WHITE</a></li>
                <li><a><input type="checkbox" />BLUE</a></li>
                <li><a><input type="checkbox" />BROWN</a></li>
                <li><a><input type="checkbox" />GREEN</a></li>
                <li><a><input type="checkbox" />RED</a></li>
             </ul>
        </li>
        <li>
            <a href="">PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">PRICE</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />$49</a></li>
                <li><a><input type="checkbox" />$59</a></li>
                <li><a><input type="checkbox" />$69</a></li>
                <li><a><input type="checkbox" />$79</a></li>
                <li><a><input type="checkbox" />$89</a></li>
            </ul>
        </li>
        <li>
            <a href="">BRAND</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />CANCLINI</a></li>
                <li><a><input type="checkbox" />FINEST ORIGINAL FABRICS</a></li>
                <li><a><input type="checkbox" />T. MASON</a></li>
            </ul>
        </li>
        <li>
            <a href="">TYPE OF PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />OXFORD</a></li>
                <li><a><input type="checkbox" />DOBBY</a></li>
                <li><a><input type="checkbox" />DOBBY STRIPE</a></li>
                <li><a><input type="checkbox" />PINPOINT OX</a></li>
                <li><a><input type="checkbox" />OTHERS</a></li>
            </ul>
        </li>
    </ul>

</div>

<!-- /navigation categories -->

<!-- product -->

<div class="product_selection">

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
            <div class="item_label">#</div>
            <div class="item_value">1-KK00</div>
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" /> 
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

</div>

</div> 

Here's the sample result

http://jsfiddle.net/rochellecanale/2jrvL/embedded/result/

Here's the fiddle

http://jsfiddle.net/rochellecanale/2jrvL/

Th image gallery should be 4 columns only. That's all guys I hope you can help me.

Answer 1

@Jerielle, Here you can use media queries that are introduced in CSS3.

Please go through the below links where you can get basic Idea to apply CSS in your CSS file.

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://foundation.zurb.com/docs/media-queries.html