complex responsive design

[sumpson]

Hello everybody,

I am trying to achieve the kind of design as you see in the the following image:



As you can see some of the elements go all the way trough to the sides which makes it quiet complex.
Would it to be possible to create this in a kind of fluid responsive design where all elements scale when window scales or will I have to check and fix on all different sizes with a design like this?

I don't have much experience with responsive webdesign, suggestions are very welcome!


For those interested in the actual design:

[JohnnyB]

Would it to be possible to create this in a kind of fluid responsive design where all elements scale when window scales...?

Yes

...will I have to check and fix on all different sizes with a design like this?

Yes

The Responsive design/development process is not really much different than what we used to do. Responsive doesn't mean that the default layout will always look the same for all browsers on all devices (mobile/desk). It is a fluid/elastic approach using media queries and server-side negotiation to present content (http://en.wikipedia.org/wiki/Responsive_web_design).

[sumpson]

I have found allot of examples of responsive grids for example here: http://bradfrost.github.io/this-is-resp ... terns.html but I don't know how to approach a fluid grid with some fields extending all the way to the sides and some blocks not. do you have an idea on how to approach this?

my concerns:



was thinking of the red block, would have to test if this works but id rather not have body overflow-x hidden

[JohnnyB]

was thinking of the red block, would have to test if this works but id rather not have body overflow-x hidden

Instead of using float for it, try using display: inline-block.

An alternate technique is to use display:table on a containing div and then set the red block as a display:table-cell.

Be sure to set vertical-align: top, bottom or middle for the div regardless of which display technique being used.

I don't know how to approach a fluid grid with some fields extending all the way to the sides and some blocks not

I usually set smaller blocks inside of containers that have full, 100% width. Then you can float, or use display: inline-block to arrange them with their needed width % or em.

If the smaller box sizes will be unknown or vary as the browser size changes, you can try to implement a flex-box approach. It was kind of fun working this out for a client: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

[sumpson]

Thanks for your help! I think I found a way to fix it with the display:table; and display:table-cell; I found this example on the web about it: http://jsfiddle.net/Autodealers/266PG/

I will definatly take a look at the flexbox approach tommorow! looks interesting.

I just checked the table-table-cell compatibility and it seems it is not supported by IE 7 or lower. I was thinking is there an easy way with javascript to detect the width and show it as an inline width?

found something like this, not really sure it would work and how to implement it but it might be very good?

Code: Select all

var layout = {
	init: function() {
		layout.sidebarAutoSizing();
		
		$(window).resize(function() {
			layout.sidebarAutoSizing();
		});
	},
	
	sidebarAutoSizing: function() {

		sidebar_fill_width = $(window).width() - 914;
		
		if (sidebar_fill_width % 2 == 0) {
			sidebar_fill_width = sidebar_fill_width / 2;
		} else {
			sidebar_fill_width = (sidebar_fill_width-1) / 2 + 1;
		}

		$('#sidebar').css('width',sidebar_fill_width);
	}
}

[JohnnyB]

You can try to patch things up in IE 7 and older with Javascript, but to save aggravation and client side resources, I would just throw IE7 something it can chew on.

Set up an IE7 only stylesheet that floats those blocks instead of using the css3 table-cell stuff. It won't harm your 'responsiveness' since only IE7 will be served the alternate css rules.

BTW, To fix any display:inline-block rules for IE7, you will need to send IE7 the following:
div {
display:inline;
zoom:1
}

(zoom is only for IE)

[sumpson]

thanks allot johny (y)

[applejack]

Re: I just checked the table-table-cell compatibility and it seems it is not supported by IE 7 or lower.

You have go to be kidding right. Why on earth are you trying to make responsive design work on IE7 and < when there are NO mobile or tablet devices which use these browsers. You can quite easily create a IE7 and < site which works on desktop for those but forget about them working responsively for them.

Unless you really really need to for a very good reason drop anything less then IE8 for all platforms as the user base is so low or maybe you are in China.