0

Summary: I have three main divs within the body tag of my website, the first two have one element of fixed dimension. I want the third div to take up 90% the remaining width and to be centered.

Detail: I have a website that has three main divs within the body tag. The divs, and relevant details, are as follows:

  1. nav-top: should span the full width of the page, stay in place when scrolling (position: sticky), and be 50px in height
  2. nav-left: should span the full height of the page (offset by 50px to sit below #nav-top), be 50px wide, and stay in the same place at all times (position: fixed)
  3. body-content: should have its entire box-model contained within the remaining space left by #nav-top and #nav-left. Of this remaining space, it should take up 90% of the width and be centered horizontally

The #body-content is the div I'm having issues with, the box-model is starting from the edge of window, effectively underneath #nav-left.

I feel this should be a fairly simple problem to solve, but I'm struggling to get it working as expected. There WILL need to be responsive elements for this website, but for now I can't even get this issue resolved.

* {
  padding: 0;
  margin: 0;
}

#nav-top {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 50px;
  margin-bottom: 20px;
  background-color: DodgerBlue;
}

#nav-left {
  position: fixed;
  top: 50px;
  width: 50px;
  height: 100%;
  background-color: Silver;
}

#body-content {
  background-color: Tomato;
  color: white;
  width: 90%;
  margin: auto;
}
<div id="nav-left">
</div>
<div id="nav-top">
</div>
<div id="body-content">
  <div id="breadcrumb">You are here: Home</div>
  <div class="jumbotron">
    <h1>Software v2</h1>
    <p class="lead">Software v2 is the new version of the site!</p>
  </div>
  <div class="content-row">
    <div class="col-33">
      <h2>Fun!</h2>
      <p>Improved for more fun!</p>
    </div>
    <div class="col-33">
      <h2>Challenging!</h2>
      <p>Improved to be more challenging!</p>
    </div>
    <div class="col-33">
      <h2>Share it!</h2>
      <p>New features to share your best moments!</p>
    </div>
  </div>
  <hr>
  <footer>
    <p class="copyright">2019</p>
  </footer>
</div>

JS Fiddle: https://jsfiddle.net/ubizvi/bq1zcp7v/19/

Ubi
  • 83
  • 7

3 Answers3

1

You let the browser calculate the margins for you:

margin-left: calc((10% + 50px) / 2);
margin-right: calc((10% - 50px) / 2);


* {
  padding: 0;
  margin: 0;
}

#nav-top {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 50px;
  margin-bottom: 20px;
  background-color: DodgerBlue;
}

#nav-left {
  position: fixed;
  top: 50px;
  width: 50px;
  height: 100%;
  background-color: Silver;
}

#body-content {
  background-color: Tomato;
  color: white;
  width: 90%;
  margin: auto;
  margin-left: calc((10% + 50px) / 2);
  margin-right: calc((10% - 50px) / 2);
}
<div id="nav-left">
</div>
<div id="nav-top">
</div>
<div id="body-content">
  <div id="breadcrumb">You are here: Home</div>
  <div class="jumbotron">
    <h1>Builder v2</h1>
    <p class="lead">Software v2 is the new version of the site!</p>
  </div>
  <div class="content-row">
    <div class="col-33">
      <h2>Fun!</h2>
      <p>Improved for more fun!</p>
    </div>
    <div class="col-33">
      <h2>Challenging!</h2>
      <p>Improved to be more challenging!</p>
    </div>
    <div class="col-33">
      <h2>Share it!</h2>
      <p>New features to share your best moments!</p>
    </div>
    <div class="col-33">
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <hr>
  <footer>
    <p class="copyright">2019</p>
  </footer>
</div>
Ubi
  • 83
  • 7
yunzen
  • 32,854
  • 11
  • 73
  • 106
  • Performance: https://stackoverflow.com/questions/26931782/display-flex-vs-calc-performance – yunzen Jan 24 '19 at 13:56
  • You can also take a look at this solution without `calc`: https://stackoverflow.com/questions/29036231/how-can-i-have-a-position-fixed-behaviour-for-a-flexbox-sized-element – yunzen Jan 24 '19 at 14:17
  • I sincerely appreciate all of the help, guidance, and understanding that you've given to me. Thank you. This has solved my problem and given me lots of underlying information that will prove invaluable. – Ubi Jan 25 '19 at 12:43
0

The best way I can see would be wrapping the nav and content in a flexbox:

HTML:

<div class="nav-top"></div>
<div class="flex">
  <div class="nav"></div>
  <div class="content"></div>
</div>

CSS:

*{
  margin: 0;
}

.nav-top{
  position: sticky;
  top: 0;
  height: 60px;
  background-color: green;
}


.flex{
  display: flex;
}

.nav{
  height: 100vh;
  width: 60px;
  background-color: red;
  /*here you most likely want to use position: sticky instead of your position: fixed*/
}

.content{
  width: 100%;
  margin: 0 5%;
  background-color: blue;
  margin: 0 auto;
}

https://codepen.io/anon/pen/vbNEzw

Michał Sadowski
  • 1,946
  • 1
  • 11
  • 24
0

First, use flexbox to contain #nav-left and #body-content in #container. Stretch #container vertically to make sure you capture the entire height (minus the #nav-top of course) by using height: 100vh;. Then to make sure your body content takes up 90% of the remaining width, set margin-left: 5%; and margin-right: 5%; which adds up to 10% margin on both sides.

I edited your jsfiddle

reiallenramos
  • 1,235
  • 2
  • 21
  • 29