Calc() Alternative to Fixed Side Bar with Content

Calc() alternative to fixed side bar with content?

I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.

Snippet

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}.parent .fluid {background-color: #f99;}

<div class="parent">  <div class="fixed">Fixed</div>  <div class="fluid">Fluid</div></div>
<div class="parent">  <div class="fixed">Fixed</div>  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div></div>

CSS Calc alternative

Almost always box-sizing: border-box can replace a calc rule such as calc(100% - 500px) used for layout.

For example:

If I have the following markup:

<div class="sideBar">sideBar</div>
<div class="content">content</div>

Instead of doing this: (Assuming that the sidebar is 300px wide)

.content {
  width: calc(100% - 300px);
}

Do this:

.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {  margin: 0;  padding: 0;}html,body,div {  height: 100%;}.sideBar {  position: absolute;  top: 0;  left: 0;  width: 300px;  background: orange;}.content {  padding-left: 300px;  width: 100%;  -moz-box-sizing: border-box;  box-sizing: border-box;  background: wheat;}

<div class="sideBar">sideBar</div><div class="content">content</div>

Issue finding calculation for sidebar and content area that respects one side of a container

The calculation of this area should be 100vw/3 - (100vw - 1200px)/2 [width of the sidebar minus the space on the left of the header] . You can use it as a negative margin-left then add a margin-right equal to (100vw - 1200px)/2 [the space on the right of the header]. You need to pay attention as the caclucation may not be accurate when you have scrollbar.

I removed the scrollbar to see the result:

body,html {  margin: 0;  padding: 0;  overflow:hidden;}
header {  width: 100%;  height: 90px;  background: #FF570c;  margin: 0 auto;  max-width:1200px;}
main {  position: relative;  display: flex;  flex-wrap: nowrap;}
aside {  min-height: 100vh;  background: #dddddd;  width: 33.3333%;}
section {  min-height: 100vh;  background: red;  width: 66.6666%;  margin: 0 auto;}
.strange-container {  display: block;  margin-left:calc(-1 * (100vw/3 - (50vw - 600px)));  margin-right:calc(50vw - 600px);  position: relative;  height: 900px;  background: rgba(0,255,0,0.8);  flex: none;}/*We no more have space around section so we replace it by 0*/@media all and (max-width:1200px) {  .strange-container {    margin-left:calc(-100vw/3);    margin-right:0;  }}

<header></header><main>  <aside>  </aside>  <section>    <div class="strange-container"> </div>  </section></main>

Variable content width fixed sidebar width layout

Change your styles to this

section {
    float:left;
    width:100%;
    margin-right: -280px;
}

aside {
    float:left;
    width:280px;
}

Live example

Static Sidebar and Fluid content with header and footer

Here's what you should do :

First, replace the float:left; with display: table-cell; for your #left and #right selectors.
Then, use display: table; for your #content selector.
Then, remove the width: 80%; of your #right and #right footer selectors
Add right : 0; to your #right footer selector
Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.

The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().

A demo :

html, body {     height: 100%;     margin: 0;}   
#content {     width: 100%;     height: 100%;    display: table;}   
#left {     width: 100px;    height: 100%;     display: table-cell;    background-color: red; }   
#right {     display: table-cell;    height: 100%;      background-color: green;} 
#right header {     background: blue;    text-align: center;    color: white;    padding: 20px;}
#right footer {    background: brown;    text-align: center;    color: white;    position: absolute;    bottom: 0;    right : 0;    left : 100px;}

<div id='content'>       <div id='left'>Testing</div>       <div id='right'>        <header>TITLE</header>        <div class="content">            <p>lorem ipsum and the like.</p>        </div>         <footer>FOOTER</footer>    </div></div>

Fluid/fixed design with sidebar composed of two items

media queries allow you to say at a certain windows size I want this css to run. So for example:

.ads {
    float: right;
    width: 250px;
    margin-left: 5px;
}
@media screen and (max-width:500px) {
    .ads {
        width: 250px;
        margin: 0 auto;
    }
}

So using this you can control css depending on screen size

Example:

http://jsfiddle.net/link2twenty/kufbbodr/

Change the width of the result box to see how it works

Fixed position sidebar within a flex container

You can use position: sticky;. It respects the flex and has a fixed purpose.

DEMO:

.container {
  width: 1000px;
  margin: auto;
  border: 1px solid black;
}

.content {
  display: flex;
  justify-content: space-between;
}

.left-content {
  height: 1000px;
  width: 70%;
  background-color: red;
}

.right-sidebar {
  height: 200px;
  width: 20%;
  background-color: yellow;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<div class="container">
  
  <div class="content">
    <div class="left-content">
    left content
    </div>
    
    <div class="right-sidebar">
    right sidebar
    </div>
  </div>
</div>

Nested clearfix with fluid width contents

You can try adding this:

.wrap {
  ...
  overflow: hidden;
}

jsFiddle

Or, using calc():

.wrap {
  width: calc(100% - 200px);
  float: left;
}

jsFiddle

Navigation bar jumping to the right when position fixed is added with js, trying to compensate with width(calc), but open side navigation breaks it

I think it is pretty funny you add a class called sticky but it sets the position value of the #navbar to fixed.

If you would set the position to sticky instead of fixed you would already almost get the result that you are after.

The only thing to change is then to add a space between the content of the navbar using justify-content: space-between. You can use this instead of the margin auto on the nav list class you've set.

#navbar {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

#navbar.sticky {
    position: sticky;
    top: 0;
    box-shadow: 5px -1px 6px 5px #dad7d7;
    clip-path: inset(-5px -5px -200px 0px);
    background-color: #e3f4f1;
    transition: 0.5s;
    z-index: 1000;
}

Calc() Alternative to Fixed Side Bar with Content