How to have footer and header be 100% browser width, but keep everything in between at 80%

Question

The above picture is what I"m trying to achieve. The top header is 100% browser width no matter the size of browser. The footer is the same. I would like everything else between these two to be 80% as shown in the black box. I think it's a relatively easy concept but my code isn't working:

https://jsfiddle.net/2qwvbdy4/

@font-face{
	font-family: Bebas;
	src:url(BEBAS.TTF);
}
body{
	width:80%;
	margin:0 auto;
	height:500px;
	background:blue;

}
.header{
	top:0;
	position:absolute;
	left:0;
	right:0;
	background:#ff6200;
	height:50px;
	width:100%;
	color:white;
	font-family: Bebas;

}
.header .call{
	
		line-height:50px;
}
.callme{
color:blue;
}
.navbar{
	margin-top:100px;
	position:relative;
}

<div class="header">
<div class="call">
<span class="callme">CALL US NOW!</span> 
<span class="number">777.77.7777.777</span> 
</div>
</div>
        <div class="navbar">
            <span>logo</span>
        </div>


<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

If possible, I would like to achieve this without using Bootstrap. I'm sure it's not necessary to use a grid system for this but can't figure out what I'm doing wrong. One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn't working.

Answer 1

IMHO flexbox is the way to go, but since Micheal_B got that covered, I'll demonstrate basic positioning and hodgepodge of other styling.

I usually start with the body which should set the pace for the rest of the layout goes. I saw that the body was 80%, I can say with 99% confidence that limiting the dimensions of the body is never done.

One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn't working.One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn't working.

100% length (i.e. width or height) means it is 100% of the element's parent (i.e. the element that contains the element in question). So if you set 100% on the header for example, you are telling the browser, "Make the header's height 100% of the body's width." Even though it sounds logical, it's not treating the body as it's parent, it's actually referring to the html element. I won't go into the gory details so read this article. It sounds very counter-intuitive so I always apply position: relative to the body which makes it's dimensions referenced to the viewport (the edges of the actual screen). When you noticed how 100vh was effective as where 100% wasn't, it's because vh and vw measurements are always referenced to the viewport just like the html element and just like the body when it's position: relative.

@font-face{

font-family:Bebas;
 src:url(BEBAS.TTF);

}
body {
  position: relative;
  width: 100vw;
  margin: 0 auto;
  height: 100vh;
  background: blue;
  overflow: hidden;
}
.header {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  background: #ff6200;
  height: 10%;
  width: 100%;
  color: white;
  font-family: Bebas;
}
.header .call {
  line-height: 100%;
  vertical-align: middle;
}
.navbar {
  position: absolute;
  top: 10%;
  left: 0;
}
.row {
  width: 80%;
  background: red;
  margin: 0 auto;
  height: 80%;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
.footer {
  width: 100%;
  height: 10%;
  background: green;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.callme {
  font-variant: small-caps;
  font-style: normal;
  font-size: 20px;
  font-weight: 900;
  color: #fc4;
}
.col-md-8 {
  width: 66%;
  height: 100%;
  display: inline-block;
  border-right: 3px dashed black;
}
.col-md-4 {
  width: 33%;
  height: 100%;
  display: inline-block;
}
section {
  text-align: center;
}

<header class="header">
  <address class="call">
<span class="callme">Call us now!</span> 
<span class="number">777.77.7777.777</span> 
</address>
</header>
<nav class="navbar">
  <span>logo</span>
</nav>


<main class="row">
  <section class="col-md-8">.col-md-8</section>
  <section class="col-md-4">.col-md-4</section>
</main>
<footer class="footer"></footer>

Answer 2

Do you want something like below. I noticed that the width of your body is 80% I don't think you want that. The body is a parent element and position absolute on your element is making thing go out of the flow of the page

*{
  margin: 0;
  padding: 0;
}
.header{
  background: orange;
}
.main{
  border:3px solid black;
  width: 80%;
  margin: 0 auto;
  height: 500px;
}
.footer{
  background: blue;
}

	<div class="header">HEADER</div>
	<div class="main">MAIN</div>
	<div class="footer">Footer</div>

And It's unclear which element you're trying to center or size. Is it the navbar? I think you're trying to make the body 80% and trying to get the effect you want. I don't think that's a good way to do it, because all child elements will be part of it. Make the body 100% and make the children element smaller and center them relative to the body.

Answer 3

You can achieve this layout simply and efficiently with flexbox:

HTML (no changes)

CSS

@font-face {
    font-family: Bebas;
    src: url(BEBAS.TTF);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 500px;
    margin: 0;
}

.header {
    background: #ff6200;
    flex: 0 0 50px;
    width: 100%;
    color: white;
    font-family: Bebas;
    }

.navbar {
    margin: 0 auto;
    background: aqua;
    width: 80%;
    flex: 1;
}

.row {
    background-color: yellow;
    flex: 0 0 50px;
}

The code above renders this layout:

• Header: 100% width
• Footer: 100% width
• Everything in between: 80% width

DEMO

---

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.