Fluid + Fixed width responsive layout – seemingly trivial, alas, it is not

[Ixolite]

Hello fellow combatants. I have a puzzle for you.

I need to create a responsive layout with fluid main content area consisting of two content boxes and fixed width sidebar. Easy enough.

The catch is that I want the sidebar to move under the topmost content box in narrower view, as helpfully illustrated here:
http://ixolite.info/csstest/fluid-fixed-rwd.png

Also, each content box has a CSS background gradient that obviously can’t spill out of the designated content areas.

There is an example solution I have came up with here:
http://ixolite.info/csstest/example.html

It is proof of concept, not yet cross browser, should work as intended in Firefox, Chrome, Safari(?) and IE 9+ (?) at the moment. Won’t work in IE8, Opera 12 and Android browser.

While the problem at hand seemed trivial at first it proved to be one tough nut to crack. My solution is far from elegant unfortunately :( I am wondering if there is any better way to achieve what I want or if I could improve my solution in any way?

[Ixolite]

I might be missing something or have it set up the wrong way but it doesn’t quite work for me:

http://ixolite.info/csstest/example2.html

I cannot completely rule out a massive brain-fart on my side in that matter since I spent too much time trying to solve it already, so bear with me please…

EDIT: The example is pretty much the same as the real thing – I have it in wrapper, separate from other parts of the page so whatever works here, works the same in production.

[Ixolite]

I pondered on it a little more and came up with a little cleaned up version:

http://ixolite.info/csstest/layout-test4.html

I did have a bit of a brain-fart. After shuffling the div’s positions a bit I was able to get it working as you said deeve007. Can’t really tell what led me to the point of breaking that simple arrangement – too many changes along the way. Guess tunnel vision struck me there.

In any case – I still don’t see a way of achieving this without setting width for the content divs and I don’t see a way of setting it without the use of calc(), which is less then desirable since I have to do a .js fallback where calc() is not supported).

So my question still stands – is there any better way to do that?

[Tom Houy]

What if you set a fixed right margin on the top DIV that was equal to the width of the sidebar, then floated the sidebar over it with a negative top margin?

Then in the media queries, just get rid of the right margin and the negative margin for smaller screen sizes.

[Ixolite]

Ok, so as I thought it was a case of massive brain-fart induced tunnel vision :(

While I did try the negative margin, for some reason I didn’t add a wrapper div for the left content divs. So naturally it didn’t work. And having tried that I didn’t look back at this solution. I feel stupid now :(

Thanks for the help guys.

[Author]

Posts