Responsive Layout with content wrapping a sidebar

Question

Looking for a responsive layout using CSS only that can behave like the images shown. There are 5 basic areas of the site. Header, Lefthand nav, Content, a sidebar and a footer. So far i have everything done besides the content/sidebar relationship. For the desktop site the green sidebar floats inside the content area and to the right and when the sidebar ends the content wraps around it. On the mobile site the sidebar moves below the content. The issues i am having are getting this to happen. I can get it to float left without the wrap and then move below the content but getting the content to wrap the sidebar as well is proving troublesome. Any pointers?

Full Desktop Image Mobile Site

S P · Answer 1 · 2013-12-25T04:09:42.307

what about this approach;

Please note that the following excerpt is not completed, but it gives you hopefully a good idea:

For the desktop-version: In order to display the sidebar in the content section properly, the best you could do is to absolute-position the sidebar-section. Like this:

 #content {
      position: relative; 
 }


 #sidebar {
      position: absolute;
      right: 0px;
      top: 0px;
 }

Above code requires that "sidebar" is wrapped by "content" which will cause problems with the following piece of code:

Smartphone / tablet support: To stack all sections nicely on a smartphone:

 @media screen and (min-width: 0px) and (max-width: 900px)  {

   #navigation, #content, #sidebar, #footer  {
      width: 100%;
      float: left;
      clear: both;
      border-top: 1px solid #ccc;
      margin-top: 20px;
      background: none;
      position: relative;
   }

 }

Now, our final problem is the fact that "sidebar" is still wrapped by "content". Couple of approaches to solve this issue;

Use JavaScript to move the #sidebar to and from another block based on the screen width.
What about introducing a second sidebar-section such as #sidebar-mobile which is only visible when you are on a mobile device. Obviously, in that case, the first sidebar will be invisible.

score 1 · Answer 2 · answered Dec 25 '13 at 05:23

This is your code for content area.

    <div id="content">
        <div id="sidebar">
         sidebar
        </div>
         content
    </div>
<div id="footer">footer</div>

Here is the css for desktop and device as well.

#content {background:yellow; padding:20px;}
#content p{ margin:0;}
#sidebar {background:green; float:right; padding:10px; margin:0 0 10px 10px;}
#footer{background:#2AABE4;}

@media only screen and (max-width: 420px) {
#sidebar{ float:none; margin:0;}

}

Now we have to use the little bit part of jquery to place the side between #content and #footer in device. Here the code for jquery.

function setlayout(){
    //alert($(window).width())
  if( $(window).width() < 420 ){
    $('#sidebar').insertBefore('#footer');
  } else {
      $('#sidebar').prependTo('#content');
  };
};

$(window).on('resize load', function(){  setlayout() });

Above code will work on window resize and window load as well.

When you will resize you browser below 420 it will move the div. You can modify the width as per your requirement.

For working example visit below link. http://jsfiddle.net/rakeshpersonal/hknBb/

score 1 · Answer 3 · edited May 23 '17 at 12:24

1

You can (ab)use CSS display:table to effectively rearrange divs using just CSS without any Javascript.

Use your initial formatting for the "desktop" view.

In the mobile view (which you can activate by a CSS3 media query), apply display: table to a wrapper around everything else on the page (or directly to the body tag). Then, use display: table-footer-group to push the sidebar and footer to the bottom, and use float: none to remove their float properties.

edited May 23 '17 at 12:24

Community

1
1

answered Dec 25 '13 at 10:29

nhinkle

1,157
1
17
32

interesting and ingenious solution – dpegasusm Dec 25 '13 at 16:47

score 0 · Answer 4 · answered Dec 25 '13 at 02:20

The following is based under the presumption that your html is like this.

<div id="content">
    <div id="sidebar">
    </div>
</div>

For desktop:

#sidebar {
    position: absolute;
    right: 0;
    top: 0;
}

For mobile:

#sidebar {
    position: relative;
    margin-top: 16px;
}

you probably need to have position relative for content, for it to work, but if not there is likely other solutions

#content {
    position: relative;
}

Responsive Layout with content wrapping a sidebar

4 Answers4