Centering a position: fixed div When Viewport Reaches a Designated Width

Go To StackoverFlow.com

0

I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:

<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>

And here is some of the basic HTML being used to format it:

#sidebar {
    width: 30%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: gray;
}
#content {
    width: 70%;
    margin-right: 30%;
    max-width: 49em;
}

At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.

I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.

Thanks!

Update: here's a very rough schematic of what I am looking for:

|A|B|C|D|

B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.

2012-04-03 22:09
by lemonmade
Can you reprhase your last requirement, I don't understand it (about the textured background). Providing a little schematic drawing would be helpful too - Benjamin Crouzier 2012-04-03 22:36
Updated, hopefully it's a bit clearer - lemonmade 2012-04-03 23:18


1

Something like this:

<body>
    <div id="wrapper">
        <div id="sidebar">sidebar content</div>
        <div id="content">articles, images, etc</div>
    </div>
</body>

With CSS that is similar to this:

body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
    max-width:1000px;
    margin:0 auto;
    background:#FFF url(imageForSidebar.png) -66% top repeat-y;
    position:relative;
}
#sidebar {
    width:30%;
    float:right;
    position: fixed;
}
#content { margin-right:30%; }

The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.

2012-04-03 22:14
by Matthew Darnell
Thanks, but I don't think that this would keep the sidebar fixed, would it - lemonmade 2012-04-03 23:15
You would just need to add 'position: fixed;' to fix it. I missed that in your original post - Matthew Darnell 2012-04-05 15:47
The position:fixed takes the sidebar out of the flow so it no longer gets centred when the total width exceeds 70em - lemonmade 2012-04-05 23:34
If you add position relative to the parent, this issue goes away - Matthew Darnell 2012-04-06 19:13
OK, that works when it's on the left-side (i.e., I don't put any float or right/top positioning to the sidebar). But, when I try to put the sidebar on the right side, it doesn't work; float: right does nothing with fixed positioning and if I do: "top:0; right:0", it fixes it to the top right of the browser, not the wrapper div. So close! Any ideas - lemonmade 2012-04-07 13:53


1

This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)

HTML:

<div id="container">
    <div id="content">articles, images, etc</div>
    <div id="sidebar">sidebar content</div>
</div>

CSS:

#sidebar {
    width: 29%; background-color: gray; border: 1px gold solid;
    float: left;
    position: fixed; right: 0; top: 0;
}

#content {
    width: 69%; max-width: 49em; border: 1px silver solid;
    float: left;
}

#container {
    max-width: 70em;
    margin: 0px auto;
}​

jsFiddle here. (You can test by just dragging the middle frame left and right) ​

2012-04-03 22:27
by Benjamin Crouzier
The sidebar won't be fixed in this case. The fixed positioning of the sidebar is key - lemonmade 2012-04-03 23:07
Updated my answer to take it into account (sorry to miss that - Benjamin Crouzier 2012-04-03 23:16
Yeah that was what I got up to. The problem is that the fixed width of the sidebar takes it out of the container div, so it doesn't get centred after the viewport exceeds the set width - lemonmade 2012-04-03 23:20
But if it is fixed on the right, it will never get centered... This is what I don't ge - Benjamin Crouzier 2012-04-03 23:25
What I want is for it to be fixed always so that the content in the sidebar doesn't move when scrolling. However, when the window gets past a large enough width (70em), I want the sidebar to get centred with the content so that it isn't stretched to ridiculous proportions - lemonmade 2012-04-04 23:09
Essentially, I want it to go from this when the window is sub-70em: |70%content||30%sidebar| to this when the window is greater than 70em: |A||49em content||21em sidebar||A|, where the sidebar is fixed position and A is (browser width – 70em)/2, centring the 70em of content in the oversized browser window - lemonmade 2012-04-04 23:09


0

You can add media queries into your css

//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}

//media query (you can add max and min width of the sceen or one of both)
@media screen and (min-width:500px) { 
    #sidebar{
       //css you want to apply when when width is changed
 }
}
2016-09-28 07:49
by Chopper