Forums

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.

karlpcrowley

What you would need to do is write a Javascript function to measure the width of the window, subtract the width of the fixed width div and then set this to the other div
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

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.

karlpcrowley

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

karlpcrowley

Check this out, It's a little hacky, but notice the padding on the main area is the width of the fixed area
http://jsfiddle.net/gpxeF/2/

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 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;
          }

      <div id="container">
          <div id="header">
              <h1>LAYOUT TEST #2</h1>
          </div>
          <div id="main">
              <div id="content">
                  <h2>THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT</h2>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <h2>sub heading</h2>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <h2>sub heading</h2>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
              </div>
              <div id="sidebar">
                  <h3>navigation (left)</h3>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
                  <p>lorem ipsum</p>
              </div>
          </div>
          <div id="footer">
              <h1>LAYOUT TEST #2</h1>
          </div>
      </div>

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; }

treehouse : what would you like to learn today?

Forums

[Solved] Fixed Width Sidebar in Responsive Design

fixedWidth{

theRest{