Fixed Width Sidebar in Responsive Design

[aprea]

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.

[aprea]

Thanks dude, not often do you hear that something is supported in IE & not chrome. It’s too bad that there’s no pure CSS solution for this just yet that works in most browsers.

[aprea]

Yeah, I just had that idea, cheers! I’ll try it out

[kimil]

I’ve found this:
stackoverflow: how to build a 2 column fixed fluid layout
and that:
dynamicdrive.com: CSS liquid layout fixed-fluid

[funnyrajj]

hi guys,
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.

[mtchao]

I found this post really helpful:
http://www.onderhond.com/blog/work/responsive-grid-old-trick/

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.

[Reegan]

http://jsfiddle.net/gpxeF/154/

Just edit these values it should work.

#fixedWidth{
width: 200px;
float: left;
background: blue;
display:table
}
#theRest{
background: green;
display:table
}

[davislurve]

Another solution would be to use box sizing and absolutely position the sidebar.

E.g if your main content was in a div class of main, with an aside sidebar you could do:

.main {
padding-right: 180px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

aside {
position: absolute;
right: 0;
top: 0;
width: 180px;
}

depends if you need to support IE7 or not – although I believe there is a hack to make box-sizing work in IE7…

[schadeck]

@karlpcrowley: You can get around the float wrapping by adding:

#theRest {
background: green;
overflow: hidden;
}

http://jsfiddle.net/schadeck/VcAS6/

[normadize]

Why not this: http://jsfiddle.net/UdGXN/ ?

#fixedWidth {
position: absolute;
right: 0;
top: 0;
width: 180px;
}
#theRest {
margin-right: 200px;
}

[Moeed]

If you are using bootstrap then use this

CONTENT

[Moeed]

class=”span2″ style=”position:fixed; right:0″

[MobileWebExpert]

normadize’s code worked best for me. Here is an example page which also includes some padding. I’ve also added some comments to the code if you want to put the sidebar on the left (very easy). Have tested this on various machines/browsers and it renders perfectly in all…

body {
background: orange;
}
#container {
max-width: 1000px;
min-width: 768px;
margin: 0 auto;
background: yellow;
}
#header {
background: purple;
color: white;
text-align: center;
padding: 10px;
}
#main {
position: relative;
}
#sidebar {
background: blue;
width: 200px;
color: white;

position: absolute;
top: 0;

/* change this to “left: 0;” if you want the sidebar on the left. Also change the “margin-right” below. */
right: 0;

padding-top: 20px;
padding-bottom: 20px;

padding-left: 10px; /* If you change this value, remember to change the margin-left value of #content */
padding-right: 10px; /* ditto */
}
#content {
background: red;

/* change this to margin-left if you want the sidebar on the left. Also change the “right” code, above. */
margin-right: 220px; /* sidebar_width + sidebar_left_padding + sidebar_right_padding = 200px + 10px + 10px */
padding: 1em; /* whatever */
}
#footer {
background: green;
color: white;
padding: 10px;
}

LAYOUT TEST #2

THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT

lorem ipsum

lorem ipsum

lorem ipsum

lorem ipsum

lorem ipsum

sub heading

lorem ipsum

lorem ipsum

lorem ipsum

lorem ipsum

sub heading

lorem ipsum

lorem ipsum

lorem ipsum

lorem ipsum

navigation (left)

lorem ipsum

lorem ipsum

lorem ipsum

lorem ipsum

LAYOUT TEST #2

[MobileWebExpert]

…you will also need to specify the height of the sidebar to prevent overlapping if the sidebar is taller than the main content.

[bah2002us]

2 sidebars fixed and main area fluid.

**HTML**

<aside class="fixd2">Fixed 1</aside>

<aside class="fixd1">Fixed 2</aside>

<main class="main">

<section>

<article>The rest of the space</article>

</section>

</main>

**CSS**

aside, section, main, article { display: block; }

.fixd1 { width: 200px; float: left; background: orange; }

.fixd2 { width: 200px; float: right; background: yellow; }

.main{ background: red; margin: 0px 200px 0px 200px; }

[Author]

Posts