I’m attempting to create a responsive design that has a pretty common layout. Main content area on the left and a sidebar on the right.
What I would like to happen is that when the windows is resized the main content div’s width is reduced while the right sidebar remains to have a fixed width.
I can handle the responsive bit, I’m just trying to figure out how to implement 1 fluid width div and 1 fixed width div while still taking up 100% of the outer container and remaining the margin inbetween the two divs.
Then call this function on page load and window resize
There is a way of doing this with css3 calc() but it’s currently only supported in IE and FF
You can do it with just CSS
like so -> http://jsfiddle.net/gpxeF/
But I’ve often found this way to get messy when you have a lot of content
i.e. is the fixedWidth bar is not as tall as the content, it will distort
Is there a way to convert fixed layout design of http://www.thefunnyquotessayings.com to a responsive design ? I am not a highly technical person. Just wondering if there are any tools to convert the site to responsive design. Thank you waiitng for your reply.
Only one column is responsive (the content column) but it also includes a breakpoint at a certain width by using a media query. Most importantly, the width of the fluid column is adjusted BEFORE the floating sidebar get’s re-stacked after the content column when the breakpoint is reached.