Grow your CSS skills. Land your dream job.

Right master column to left content column in responsive design

  • # January 31, 2013 at 1:48 pm

    I’m trying to change this layout (http://www.egrappler.com/onepager/demo.html) – can be downloaded here (http://www.egrappler.com/onepager/onepager.zip) – so the left navigation column will be on the right (for a right-to-left language web site).

    The current CSS that controls it with left positioning of the sidebar is:

    div#sidebar {
    width:220px;
    height:100%;
    float:left;
    background:#2c2c2c;
    border-right:1px solid #2e2f2f;
    position:fixed
    }
    div#container {
    width:730px;
    float:right;
    padding-right:25px;
    left:-5px;
    position:relative;
    padding-top:0;
    background:#619ec2;}

    I changed it to this:

    div#sidebar {
    width:220px;
    height:100%;
    float:right;
    background:#2c2c2c;
    border-left:1px solid #2e2f2f;
    position:relative;
    }
    div#container {
    width:730px;
    float:left;
    padding-right:25px;
    position:relative;
    padding-top:0;
    background:#619ec2;
    }

    In HTML sidebar is the first div and container is the second div after it.

    But then the navigational sidebar is not full length and when clicking on one of the headers I don’t see it any more – since it is not fixed on the page.

    Setting navigational sidebar to ‘fixed’ positioning returns it to be left aligned and if I provide a number of pixels from the right/left browser edges then it doesn’t work well when the browser is resized.

    Any idea what I need to do?

    Thanks a lot!

    # January 31, 2013 at 2:05 pm

    fixed positioning is based on the viewport. You want to center your wrap, so do so with auto margins as you have. Float the the #container left, as you tried. And the #sidebar will remain position:fixed; but to place it correct use left: 50%; putting the left edge at the center of the screen, and then use left margin to push it over to the right side of content (try 260px).

    # January 31, 2013 at 2:15 pm

    Thanks a lot! Got it – used the margin-left property and it works really well when the it’s full screen but not on resize. If I resize it to a small screen – it’s a responsive design and it’s supposed to fit the mobile screen too – the sidebar “escapes” to the right instead of centering above the main area. Any ideas how I can fix this?

    Also on resize – when reducing the width of the browser screen – the sidebar “shrinks” from the right and since there are going to be headlines there in a RTL language, some of the text might be hidden which I’d like to prevent.

    Thanks!

    # January 31, 2013 at 3:13 pm

    in your media-queries.css add left: 0; and margin: 0; to #sidebar for the small screen size, and the medium screen size, make the width adjustments and margin change your looking for. I’d also change the max-width on the medium to 980 (instead of 970).

    # February 2, 2013 at 12:41 am

    Thanks a lot! It works!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".