CODEWITHSUNDEEP
htmlcsscss-positioncentering
Limon
Limon

Reputation: 993

CSS position fixed center sibling

I have a sidebar that is set to position fixed and I also have the area for the main content that is centered. The problem is that I want to center the content with regard to the sidebar. But because its position is set to fixed, content is centered only regarding the entire width of the body.

I know this can be solved by setting margin for the body which will center the content properly, but I only have the sidebar on some of the pages and not all. I created a fiddle to demonstrate the overall problem. So here, half the time the sidebar will show up, and half the time its not there. But the position of the content is always the same, which is not what I want. I want it to center with regard to the free space remaining (after the sidebar (if it is present)).

In short, I want to keep the HTML structure (#everything and #content) static, but the sidebar can make whatever changes needed to make this work.

I was thinking to maybe have the sidebar that isn't fixed, but is just infinite long in height and on top of it add a position fixed element that will have the content. This way the sidebar will move the content out of the way and make it center properly while also having the content fixed. But I dont know how to make that sidebar stay in there and be infinitely long...

CSS:

#sidebar {
    position: fixed;
    width: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid #111;
    padding:5px;
    background:#f3f3f3;
}

#content {
    width:250px;
    margin:0 auto;
}

Upvotes: 0

Views: 1171

Answers (2)

Ivošš
Ivošš

Reputation: 1156

this is wery goood and easy example for align auto center and position fixed

HTML:

<div class="popup">
  <div class="wrapper">
       some content
    </div>
</div>

CSS:

.popup{
    position:fixed;
    left:50%;
}
.popup .wrapper{
    position:relative; 
    left:-50%;
}

EXAMPLE:

JsFiddle be happy :)

Upvotes: 0

Sunand
Sunand

Reputation: 723

Following is little bit complex but you can try the following

#everything{
    display:flex;
}
#sidebar {
    width: 200px;
    height:100%;
    border:1px solid #ccc;
}
#sidebar div{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid #111;
    padding:5px;
    background:#f3f3f3;
     width: 200px;
}
#content {
    flex:1;
}
#content div{
    width:250px;
    margin:0 auto;

}

The html part you can find in the following fiddle JsFiddle

Upvotes: 1

Related Questions