CODEWITHSUNDEEP
htmlcsscenteringfixed
Andante88
Andante88

Reputation: 65

Centered div containing a fixed fix

Can a centered div contain a fixed div?

I would like to center a fixed nav box and a scrolling main box side-by-side together in any big window. I can fix the nav box in a non-centered view (first code below), or center the view with a scrolling nav box (second code), but have been unable to combine these two traits, after many tries including multiple nested wrappers. Maybe fixed and centering are incompatible? If this is possible I will appreciate seeing how it is done. Thank you.

(1) Fixed nav box, scrolling main box, not centered:

<style>
#nav {position:fixed; top:50px; left:80px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:50px; left:380px; width:800px; height:1200px; background:#eee}
</style>

<div id="nav">
</div>
<div id="main">
</div>
</div>

(2) Centered, nav box scrolls (#bigscreen here is just a temp to show the centering):

<style>
#bigscreen {width:2000px; height:1200px;}
#window {width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
#wrap {position:relative; width:1125px;height:800px; background:bisque}
#nav {position:absolute; top:54px; left:20px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:54px; left:300px; width:800px; height:640px; background:#eee}
</style>

<div id="bigscreen">
    <div id="window">
        <div id="wrap">
            <div id="nav">
            </div>
            <div id="main">
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 86

Answers (2)

BK94
BK94

Reputation: 79

First, you need to create a wrapper(#content-wrapper in my answer) that includes #nav and #main divs. Then add display: flex for that wrapper to set child divs horizontally. To align the wrapper into the center, define a fixed width(1100px in my answer) and set left, right margin to auto.

Then add position: relative to the wrapper. That allows you to play with css position property in child divs within the wrapper.

Finally, add position: fixed for #nav div to set fixed position and add position: absolute & left: 300px(in my answer) for #main div to scroll in the wrapper.

See below.

<style>
  #content-wrapper {
    position: relative;
    width: 1100px;
    margin: 50px auto;
    display: flex;
  }
  
  #nav {
    position: fixed;
    width: 270px;
    height: 400px;
    background: #ddd
  }
  
  #main {
    position: absolute;
    left: 300px;
    width: 800px;
    height: 1200px;
    background: #eee
  }
</style>

<div id="content-wrapper">
  <div id="nav"></div>
  <div id="main"></div>
</div>

Upvotes: 1

Gunther
Gunther

Reputation: 1328

You mean like this?

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.8);
  padding: 10px;
  display: flex;
}

#nav {
  margin-right: 10px;
  width:20%;
  background: rgb(240,240,240);
}

#main {
  width: 80%;
  background: rgb(240,240,240);
  padding: 10px;
  overflow: auto;
}

#content {
  height: 2000px;
  background-color: rgb(220, 220, 220);
  font-family: arial;
  text-align: center;
  line-height: 2000px;
  margin-bottom: 10px;
  
}
<div id="overlay">
    <div id="nav">
    </div>
    <div id="main">
      <div id="content">Overflow content</div>
    </div>
</div>

If this is the result you're looking for you should focus only on the following lines, they are the most important ones to achieve this.

#overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
}

#nav {
  width:20%;
}

#main {
  width: 80%;
  overflow: auto;
}

Edit: You can click on full page to see the result in expanded height.

Upvotes: 0

Related Questions