HTML5 and CSS3 resizable layout

Like I told you. This week I will come up with a new tutorial.
This time it’s an HTML5 and CSS3 layout.

You will probably say there are a lot of html5 and css3 layouts out there what yours can do.
Pretty simple not only the fact that is build in html5 but it’s resizable. So basically using a layout like this you wont need a dedicated mobile version like major sites have. You will see what I’m talking about.

You can see the full demo layout here.This is how the layout design looks. It’s not much but the design doesn’t matter as long as he does his job.

If you have looked over the example you have noticed that there are 4 pages.

First page with both columns. One page with left sidebar, other page with right sidebar and the 4th page with no sidebars.

Beneath is the code that does all this tricks for all 4 pages. So even if you have a product page or a wordpress or whatever you can use this kind of layout.

All the pages are using HTML5 and CSS3. You can find the hgroup, header, footer etc.

You wont need a mobile version if you get used with this kind of layout.

/************************************************************************************
smaller than 960
*************************************************************************************/
@media screen and (max-width: 960px) {
/* pagewrap main conent holder*/
#page_wrap {
 width: 95%;
}
/* content */
#content_holder #main_content_right_side, /* width that applies on one sidebar page */
#content_holder #main_content_left_side /* width that applies on one sidebar page */ {
 width: 68%;
 padding: 3% 4%;
 margin:0;
}
/* main content is the content in the middle of the sidebars*/
#main_content {
 width: 40%;
 padding: 3% 4%;
}
/* sidebars */
#right_sidebar,
#left_sidebar { /* when you will start and go udner 960px they will have a 20% width */
 width: 20%;
 padding:1% 2%;
}
/* embedded videos */
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
}
/************************************************************************************
smaller than 650px
*************************************************************************************/
@media screen and (max-width: 650px) {
/* header */
#header {
height: auto; /* height auto for the menu */
}
/* main nav */
#main-nav {
position: static;
}
/* content */
#main_content_right_side, /*  width that applies on one sidebar page */
#main_content_left_side, /*  width that applies on one sidebar page */
#main_content { /* tell the sidebars not to float anymore*/
width: auto;
float: none;
margin: 20px 0;
border:0;
}
/* sidebar */
#right_sidebar,
#left_sidebar { /* if the sidebars are not floating anymore that means they can have a 100% width*/
width: 100%;
margin: 0;
float: none;
}
/* embedded videos */
.video embed,
.video object,
.video iframe {
min-height: 250px;
}
}
/************************************************************************************
smaller than 560px
*************************************************************************************/
@media screen and (max-width: 480px) {
/* disable webkit text size adjust (for iPhone) */
html {
 -webkit-text-size-adjust: none;
}
/* main nav */
#main-nav a { /* descrise the font-szie */
 font-size: 90%;
 padding: 10px 8px;
}
}

I hope you will enjoy the code.

I know I haven’t exaplain all the code but I think you will find it very useful.

If there is something about the layout that you want to ask, or if there are certain things you don’t understand how they work. You can just write in a comment and I’ll respond to you ASAP.

When you will download you will have some PHP files that are included like the header, footer main content or sidebars. I didn’t want to insert in every page the content. It’s easier to work with php includes.

Full example here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.