Right master column to left content column in responsive design

[scsstricks]

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!

[wolfcry911]

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).

[scsstricks]

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!

[wolfcry911]

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).

[scsstricks]

Thanks a lot! It works!

[Author]

Posts