Help With Responsive 3 Column Layout

[MargateSteve]

I am just starting to play around with responsive layouts and have got the hang of most things but one thing is stumping me.

 

If I have a fluid width layout with fixed left and right columns and a fluid center, I am struggling to get it to work the way I want.

 

Firstly the center column needs to fit the gap between left and right. I have no problems doing this if all 3 columns are fixed or all 3 are fluid but cannot get it to work with a mixture.

 

As the layout gets smaller, I want one of the columns to move below the center one. Somtimes I might want the left one to stay in place and the right one to move under the center one but sometimes it might be the other way round.

 

Finally, as the layout gets to mobile size I would want all 3 columns to be stacked. Once again I might way the stack to be left column on top, right column on bottom and center column in the middle but I might also want it so that center column is on top, left is on the bottom and right in the middle.

 

Simply, I am trying to work out how to do every possible combination of 3 columns over all screen sizes!

 

The code below is what I currently have. I have tried all sorts of combination of order of the divs in the html and floats in the css, as well as things like wrapping the center and right columns in their own container div, but never get it quite right.

 

I would be greatful if anyone can point me in the right direction!

CSS

/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
background-color:#CCC;
border:#000 1px solid;
}
#LayoutDiv1 {
clear: both;
width: 100%;
display: block;
border: #000 2px solid;
width: 87.36%;
min-height: 100px;
margin: 0 auto;
}
#LayoutDivInnerLeft {
display: none;
}
#LayoutDivInnerRight {
float: right;
margin-right: 0;
width: 100%;
display: block;
background-color:#6FC;
font-size:14px;
}
#LayoutDivInnerCenter {
margin-left: 0;
margin-right: 0;
float:left;
display: block;
background-color:#fff;
font-size:14px;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */


@media only screen and (min-width: 481px) and (max-width: 768px) {

.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
width: 100%;
display: block;
border: #009 2px solid;
background-color:#999;
min-height: 100px;
width: 90.675%;
margin: 0 auto;
}
#LayoutDivInnerLeft {
float: left;
margin-left: 0;
width: 200px;
display: block;
background-color:#6FC;
font-size:10px;
}
#LayoutDivInnerRight {
float: right;
margin-right: 0;
width: 200px;
display: block;
background-color:#6FC;
font-size:14px;
}
#LayoutDivInnerCenter {
margin-left: 210px;
margin-right: 210px;
float:left;
display: block;
background-color:#fff;
font-size:14px;
}
}

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
margin-left: 0;
width: 100%;
display: block;
background-color:#999;
border: #ccc 2px solid;
min-height: 100px;
width: 88.2%;
margin: 0 auto;
overflow:hidden;
}
#LayoutDivInnerLeft {
float: left;
margin-left: 0;
width: 200px;
display: block;
background-color:#6FC;
font-size:14px;
}
#LayoutDivInnerRight {
float: right;
margin-right: 0;
width: 200px;
background-color:#6FC;
font-size:14px;
}
#LayoutDivInnerCenter {
margin-left: 210px;
margin-right: 210px;
background-color:#fff;
font-size:14px;
}
}

 

HTML

<div class="gridContainer">
<div id="LayoutDivInnerLeft"><br /><br />Left<br /><br /></div>
<div id="LayoutDivInnerRight"><br /><br />Right<br /><br /></div>
<div id="LayoutDivInnerCenter">Center<br /><br /></div>
<div style="clear:both"></div>
</div>

 

Thanks

Steve

 

PS. Do we have to do something different with the code tags these days? They do not seem to be formatting.

[Scott_S]

To handle the reshuffling of the vertical sequence, check out display: table-header-group, table-row-group and table-footer-group.

 

Here is the link to w3c schools: http://www.w3schools.com/cssref/pr_class_display.asp

 

Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

[haku]

When doing responsive layouts, I start with the smallest layout and work upwards, adding as I go. I find this much easier than trying to work from bigger to smaller. Maybe that can help you.

[Scott_S]

When doing responsive layouts, I start with the smallest layout and work upwards, adding as I go. I find this much easier than trying to work from bigger to smaller. Maybe that can help you.

 

Absolutely! I find it imperative to think "mobile first". Keep HTML simple and as semantic as possible, let HTML be HTML and nothing more.

 

HTML = Structure

CSS = Presentation

JS = Behavior

 

The more you can keep these parts seperate the better off you will be. I think of it like MVC and having a high degree of SoC (Seperation of Concerns).

 

Lastly, I also will create a sandbox for myself to test the site that I am buidling so I can view it under different dimensions simutaneously. The sandbox is nothing more then several iframes that contain the site at the dimensions I want to test.

[ignace]

The sandbox is nothing more then several iframes that contain the site at the dimensions I want to test.

 

The Web Developer toolbar has this functionality built-in.

[MargateSteve]

Thanks Guys.

 

I have also also tried to design for mobile and then adapt it as the resolution grew but still cannot get it to 'switch' the order.

 

I will have a look at the link Scott posted to see if I can glean anything out of that but given the inconsistency of the various version of ie ( about 8% of our visitors use IE7 ) this may be tougher than I thought without JS.

 

Steve

 

PS. @ignace - I had not seen the Web Developer Toolbar before but have now installed it. What a handy bit of kit!

[ignace]

There are more handy tools available pressing F12 for example in Chrome or Firefox shows a developer console. Also tools like ChromePHP or FirePHP are really handy for debugging from the server-side of things without having to resort to things like var_dump and print_r.