Make It Easy In Responsive Layout

In learning to make blog template for self-taught blogger like me of course a lot of trial and error. But of failures that made me increasingly challenged to be able to fix it and be a valuable lesson.
Author: Adhy Suriady
Well this morning I will try to share experiences in learning CSS style, especially regarding the responsive layout. These can later you try to apply in a responsive blog template. With this we will be much easier and simpler in determining its media query.

Usually, most require a media query is the determination of the width of the element for each type of device. Moreover, if we use the unit pixel, it will be even more necessary in the style css media queries.

Therefore, in order to more flexible layout that helps to css style in a media query, responsive layout to make better use of percent (%) and auto-width layout. But in accommodation% and auto must be careful because if not properly display will fall apart. For example you can see in the image below.

To be clear again, please try the demo link below, then pan around the boundary box to see responsive

JSFiddle

For width:100% use of the most remarkable elements of the left and right padding to 0. please use the elements inside width:auto to display:block and set the margin to the distance with the outside elements.

For example for a responsive layout as simple as below.

HTML Code

<div class="content-wrapper">
    <div class="header-wrapper">
        Header
    </div>
    <div class="outer-wrapper">
        <div class="main-wrapper">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="sidebar-wrapper">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
    <div style="clear:both"></div>
<div class="footer-wrapper">
    Footer
    </div>
</div>

CSS Code

.content-wrapper{
    width:100%;
    padding:20px 0;
    margin:0 auto 50px;
    background:#ddd;
}
.header-wrapper{
    width:auto;
    height:auto;
    margin:0 20px;
    padding:20px;
    background:#666;
    display:block;
}
.outer-wrapper{
    width:auto;
    height:auto;
    margin:20px;
    padding-bottom:0;
    display:block;
}
.main-wrapper{
    width:60%;
    height:auto;
    margin:0;
    padding:0;
    background:#666;
    float:left;
    word-wrap:break-word;
    overflow:hidden;
}
.sidebar-wrapper{
    width:36%;
    height:auto;
    margin:0;
    padding:0;
    background:#666;
    float:right;
    word-wrap:break-word;
    overflow:hidden;
}
p{margin:20px}
.footer-wrapper{
    width:auto;
    height:auto;
    margin:20px 20px 0;
    padding:20px;
    background:#666;
    display:block;
}
@media screen and (max-width:320px){
    .outer-wrapper{margin-bottom:0}
    .main-wrapper,.sidebar-wrapper{width:100%;float:none}
    .sidebar-wrapper{margin-top:20px}
}

JSFiddle

As shown in the above CSS style, there is a need for a simple css media queries to determine the width of the layout of a certain width.