Creating a Buletproof & Responsive Layout

HTML & CSS
1

I’m at the beginning stages to start experimenting with an administration panel that needs to be flexible enough to fit variety of resolutions and platforms and be bulletproof enough to degrade gracefully on older browsers.

I started with some bare-bone example, and I want to be sure that it does not breaks on older browsers, not even in IE 7.

I have a header and footer that are always 100% width. The whole layout is fluid, so by default the secondary navigation needs to have a fixed width and sit on the left side, while the main area needs to fill the remaining width of the page. The main navigation should be 100% width and just above the header.

When the resolution goes below 1000px (tablets and mobile devices) the secondary navigation should stack right below the main navigation, so the main area gets to be 100% width.

When the site is browser an large screens, now it should get 3 column layout. The main navigation on the left, then the secondary navigation in the middle, and the main area to fit the remaining width.

The HTML code I’m using:

<header id="header">
	Header
</header>

<nav id="nav-primary">
	Primary navigation
</nav>

<nav id="nav-secondary">
	Secondary navigation
</nav>

<div id="main">
	Main section
</div>

<footer id="footer">
	Footer
</footer>

The default CSS:

#header {
	background: #54616b;
	color: #CCC;
}

#nav-primary {
	background: #333;
}

#nav-secondary {
	float: left;
	width: 200px;
	background: #eee;
}

#main {
	margin-left: -200px;
	background: #fff;
}

#footer {
	clear: both;
	background: #54616b;
	color: #CCC;
}

And the media-queries CSS:

@media (max-width: 1000px) {

#nav-secondary {
	float: none;
	width: 100%;
}

#main {
	margin-left: 0px;
}

}


@media (min-width: 1260px) {

#nav-primary {
	float: left;
	width: 80px;
}

#nav-secondary {
	float: left;
	width: 220px;
}

#main {
	margin-left: -300px;
}

}

Is there anything left that I need to include in the CSS in order to be sure it does not break on older browsers? Any tips are welcomed.

2

I just improved it, realizing that I’m making a mistake. Now I’m using negative margins as “margin-right: -200px;”, and not “margin-left: -200px;”, as I did the first time. Somehow it fixes some of the issues I’m facing, but I’m still not sure if this is the right way to go.

Also I’m having problems with equal height column, so for now I’m using fixed height. I’m aware that it’s not a good practice to rely on JavaScript to calculate which is the longest column, and make the same as the longest one, but it seem I can’t find a pure CSS solution without extraneous CSS and bloated markup.

3

Well you could try something like this

Basically each column is child to a wrapper. That wrapper contains the floats via overflow or clearfix or whatever. Then you just set a background image to repeat-y. Clever really.

And I was changing the viewport size over on my computer and it seems like the behavior you mentioned in the first post about wanting it to be 3 columns when width is available, then if it’s less…blah blah etc etc. Seems to be working.

4

This discussion from the other day should help with your responsive layout techniques.

For the equal columns if you are just talking about the two fixed width left columns then just use a background image as Ryan suggested as no extra mark up is needed. Fixed heights should be avoided at all costs in most cases for text content.