CSS grid on iOS using variable width is breaking. Why? - html

That's how it should look.
That's how it does look.
The same works fine on Android phones but breaks on iOS and only on the first load. If I refresh the page, it settles into the correct thing.
This is the code in handlebars:
<!DOCTYPE html>
<html>
<head>
<title>{{link_data.workplace.name}} - A Super Workplace!</title>
<link rel="shortcut icon" href="http://admin.getsuperapp.com/public/superfavicon.ico">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<style>
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(https://fonts.googleapis.com/css?family=Asap:400,400italic);
body {
margin: 0;
padding: 0;
}
.content {
padding-bottom: 62px;
}
.content .cover {
}
.cover img {
width: 100%;
}
.content .name-logo {
padding-left: 6.79%;
box-sizing: border-box;
position: relative;
top: -7px;
}
.content .name-logo .logo {
width: 58px;
height: 58px;
border-color: #d8d8d8;
border-radius: 4px;
border-width: 1px;
border-style: solid;
overflow: hidden;
display: inline-block;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
position: relative;
background: #fff;
}
.content .name-logo .logo img {
width: 100%;
height: 100%;
}
.content .name-logo .join-us {
width: 70%;
display: inline-block;
vertical-align: top;
position: relative;
top: 10px;
left: 4px;
font-family: 'Asap', sans-serif;
font-style: italic;
color: rgba(55, 71, 79, 0.54);
}
.content .name-logo .join-us .text {
font-size: 8pt;
}
.content .name-logo .join-us .company-name {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 700;
color: #37474f;
font-size: 16pt;
}
.content .company-headline {
font-family: 'Asap', sans-serif;
font-size: 12pt;
line-height: 16pt;
color: rgba(0, 0, 0, 0.54);
padding-top: 0px;
padding-left: 6.79%;
padding-right: 6.79%;
padding-bottom: 16px;
}
.content .people-carousel {
width: 100%;
background-color: #87A0AD ;
overflow: hidden;
}
.content .people-carousel.collapsed {
height: 136px;
}
.content .people-carousel .person {
width: 33.53vw;
height: 33.33vw;
display: inline-block;
margin: 0 -2px -4px;
overflow: hidden;
}
.content .people-carousel .person img {
width: 100%;
}
.content .next-person {
padding-top: 40px;
padding-bottom: 40.3px;
background-color: #03A9F4;
}
.content .next-person .text {
text-align: center;
font-family: 'Asap', sans-serif;
font-style: italic;
font-size: 14pt;
line-height: 18pt;
color: #fff;
}
.content .next-person .you {
font-family: 'Montserrat', sans-serif;
font-size: 24pt;
line-height: 24pt;
color: #ffeb3b;
text-align: center;
font-weight: 700;
}
.content .get-app {
background-color: #37474f;
position: fixed;
bottom: -1px;
width: 100%;
}
.content .get-app .badge {
display: inline-block;
padding-top: 14px;
padding-bottom: 10px;
padding-left: 12px;
padding-right: 32px;
}
.content .get-app .badge img {
width: auto;
height: 36px;
}
.content .get-app .button-wrapper {
display: inline-block;
width: 46vw;
vertical-align: top;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
box-sizing: border-box;
float: right;
right: 26px;
position: relative;
}
.content .get-app .button-wrapper a {
text-decoration: none;
}
.content .get-app .button {
width: 120px;
height: 40px;
background-color: #FFEB3B;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12);
border-radius: 4.4px;
margin-left: auto;
margin-right: -25px;
}
.content .get-app .button .button-text {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.3px;
text-align: center;
margin: auto;
position: relative;
top: 11px;
}
.page-not-found {
width: 300;
height: 300;
border-radius: 5px;
border: 1px solid #BCBCCA;
margin: auto;
margin-top: 100px;
}
.page-not-found .text {
font-family: sans-serif;
text-align: center;
padding: 100;
}
</style>
</head>
<body>
{{#if link_data.enabled}}
<div class="wrapper">
<div class="content">
<div class="cover">
<img src="http://res.cloudinary.com/superapp/image/upload/q_30,w_1242,e_blur:90/{{link_data.workplace.coverImage.cloudinaryId}}"
alt="Banner"/>
</div>
<div class="name-logo">
<div class="logo">
<img src="http://res.cloudinary.com/superapp/image/upload/w_230/{{link_data.workplace.logo.cloudinaryId}}"
alt="logo"/>
</div>
<div class="join-us">
<span class="text">Come join us at</span> <br/>
<span class="company-name">{{link_data.workplace.name}}</span>
</div>
</div>
<div class="company-headline">
{{link_data.workplace.headline}}...
</div>
<div class="people-carousel {{#unless link_data.workplace.peopleCarousel.4.image}}collapsed{{/unless}}">
<div class="person">
{{#if link_data.workplace.peopleCarousel.0.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.0.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.1.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.1.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.2.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.2.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.3.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.3.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.4.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.4.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
<div class="person">
{{#if link_data.workplace.peopleCarousel.5.image}}
<img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.5.image.cloudinaryId}}"
alt="person"/>
{{/if}}
</div>
</div>
<div class="next-person">
<div class="text">
Will the next person <br/>
to join {{link_data.workplace.name}} be
</div>
<div class="you">
you?
</div>
</div>
<div class="get-app">
<div class="badge">
<img src="http://res.cloudinary.com/superapp/image/upload/v1453184144/super-badge-ios_3x_x1zdix.png"
alt="badge"/>
</div>
<div class="button-wrapper">
<a href="{{action}}">
<div class="button">
<div class="button-text">
Get the App
</div>
</div>
</a>
</div>
</div>
</div>
</div>
{{else}}
<div class="page-not-found">
<div class="text">
Page Not Found!
</div>
</div>
{{/if}}
</body>
</html>


Usually, when things are fixed when you reload the page, the problem is that an img isn't loaded at the time the styles are applied, so the rendered doesn't know the width/height of an element and gets the layout wrong, you have to force the layout to your needs.
Try setting a fixed width and height for the img tags.
Try setting vertical-align:bottom to all the img and .person
Try setting overflow:hidden on .person
I'm not sure if all of these would work, but I hope at least one will.

Related

White area at the bottom of my webpage when i try to create a responsive design

I'm trying to make my webpage responsive to fit on an ipad and mobile, as i adjust my media query, i noticed this white area at the bottom, the body element when highlighted, it doesnt reach that area, so i dont know where it came from, anyhelp would be appreaciated. thanksenter image description here
enter image description here
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2{
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left:1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left:345px;
top:74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left:350px;
top:100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position:absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top:300px;
}
.user-links {
position: relative;
left:20px;
bottom:30px;
}
.user-links:link{
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo, .telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer{
background-color: rgb(126, 226, 230);
height: 200px;
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact{
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left:750px;
bottom:280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px ;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb, .tw, .yt, .ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content{
width: 100%;
margin: 10px;
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header{
left:50px;
}
.para{
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding:30px;
top:20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks{
display: inline-block;
}
.connect{
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content{
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo" >
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class = "header" >
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id= "errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id= "errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id= "errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15" cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id = "footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<img class="fb" src="image/fb.png" alt = "Facebook" />
<img class="tw" src="image/tw.jpg" alt = "Twitter" />
<img class="yt" src="image/you.png" alt = "Youtube" />
<img class="ln" src="image/linkd.png" alt = "LinkedIn" />
</div>
</footer>
</div>
</div>
</body>
</html>

Because of the default browser stylesheet, the body has a margin set. You can remove it with the following CSS reset:
body {
margin: 0;
}
Also, your .content has a margin set to 10px, which adds space to the bottom, remove it when you don't want it or only apply it to the top, right and left using:
margin: 10px 10px 0 10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="log-it-reports.css">
<script src="log-it-reports.js"></script>
<title>Document</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 100%;
margin: 0
}
.content {
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
div.navi {
background-color: rgb(228, 226, 217);
width: 100%;
height: 50px;
margin-top: 15px;
text-align: center;
font-size: 19px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 1px;
margin-bottom: 1px;
}
p {
color: rgb(97, 87, 226);
}
.para2 {
color: black;
}
p.nav {
position: relative;
bottom: 5px;
border-style: solid;
}
a:link {
text-decoration: none;
color: rgb(97, 87, 226);
}
img {
margin-left: 20px;
width: 400px;
}
/* inner body styling */
div.inner-body {
background-image: url(image/book2.png);
margin-bottom: 20px;
margin-right: 0px;
max-width: 100%;
border-style: solid;
margin-top: 20px;
height: 1200px;
position: relative;
}
.header {
width: 700px;
position: relative;
left: 1000px;
left: 338px;
font-size: 30px;
}
.para {
width: 800px;
position: relative;
left: 345px;
top: 74px;
background-color: rgb(206, 200, 180);
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
padding: 5px;
}
form {
padding: 20px;
border-radius: 20px;
width: fit-content;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: relative;
left: 350px;
top: 100px;
background-color: rgb(240, 239, 228);
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
width: fit-content;
width: 300px;
height: 600px;
position: absolute;
bottom: 600px;
background-color: cadetblue;
font-size: 20px;
border-radius: 20px;
top: 300px;
}
.user-links {
position: relative;
left: 20px;
bottom: 30px;
}
.user-links:link {
color: brown;
}
.userlogo {
width: 200px;
border-radius: 100px;
position: relative;
left: 30px;
bottom: 100px;
}
.btn {
width: 100px;
border-radius: 5px;
margin-top: 10px;
}
/* footer styling */
.emaillogo,
.telelogo {
width: 20px;
}
div.foot {
background-color: brown;
}
footer {
background-color: rgb(126, 226, 230);
/* height: 200px; */
}
.footimage {
width: 400px;
height: fit-content;
margin: 0;
}
div.contact {
width: fit-content;
height: 200px;
height: fit-content;
position: relative;
left: 400px;
bottom: 185px;
font-size: 12px;
}
.usefullinks {
width: fit-content;
font-size: 12px;
position: relative;
left: 750px;
bottom: 280px;
height: fit-content;
}
.connect {
width: fit-content;
position: relative;
left: 1000px;
bottom: 400px;
font-size: 12px;
height: fit-content;
}
.fb,
.tw,
.yt,
.ln {
width: 50px;
border-radius: 10px;
}
/* Media Queries */
#media screen and (max-width:915px) {
div.logo {
width: 100%;
height: 200px;
background-color: rgb(147, 235, 238);
}
.content {
width: 100%;
/* margin: 10px; */
padding: 0;
}
div.inner-body {
background-image: url(image/book2.png);
border-style: solid;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
position: relative;
}
div.navi {
width: 980px;
font-size: 30px;
padding-bottom: 90px;
}
.inner-body {
width: 100%;
}
.header {
left: 50px;
}
.para {
width: 700px;
display: block;
left: 25px;
font-size: 35px;
padding: 30px;
top: 20px;
}
form {
width: 600px;
left: 60px;
font-size: 20px;
}
.navi2 {
display: none;
}
.usefullinks {
display: inline-block;
}
.connect {
display: none;
}
.contact {
display: block;
}
}
#media screen and (max-width:415px) {
.content {
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.inner-body {
width: 100%;
}
}
</style>
</head>
<body>
<div class="content">
<div class="logo">
<img src="image/logo1.png" alt="Academy Logo">
</div>
<div class="navi">
<p id="nav">
Home |
Academics |
Services |
Covid-19 |
Students & Parents |
Transcripts |
Staff |
Career |
Events |
Student Account |
</p>
</div>
<div class="inner-body">
<div class="header">
<h1>Steps For IT-Issues Logging:</h1>
</div>
<div class="para">
<p class="para2">Please read the following instructions before submitting a report:</p>
<ol>
<li>Fill out all of the fields.</li>
<li>Use a valid email.</li>
<li>Select a problem type.</li>
<li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters
minumum).</li>
<li>Normally most issues get addressed within 2 hours, please be patient.</li>
</ol>
</div>
<div class="form1">
<form method="GET" onsubmit=" return formValidations() " action="log-it-reports.html"><br>
<div class="error1" id="errorMsg"></div>
<div>
<label for="subject"><b>Subject:</label>
<input id="subject" type="text" placeholder="Subject Title">
</div><br>
<div class="error" id="errorMsg2"></div>
<div>
<label for="email"><b>Email:</label>
<input id="email" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id="errorMsg3"></div>
<div>
<select name="techtype" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id="errorMsg4"></div>
<div>
<textarea id="description" placeholder="Description goes here" name="descript" rows="15"
cols="50"></textarea>
</div>
<div>
<button type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
<div class="navi2">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="User Image">
</div>
<div class="user-links">
<navi>
<a class="staffname" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
Inbox <br><br>
Notifications <br><br>
Files <br><br>
Settings <br><br>
Help <br><br>
QR For Mobile <br><br>
Log Out
</navi>
</div>
</div>
</div>
<div class="foot">
<footer id="footy">
<div>
<img class="footimage" src="image/logo1.png" alt="Academy Logo" width="400px">
</div>
<div class="contact">
<h3>Contact Us</h3>
<p><img class="emaillogo" src="image/email (2).png" alt="emaillogo"> :wearview_academy#wearview.com
</p>
<p><img class="telelogo" src="image/tele.png" alt="telelogo"> :+2499100000000</p>
</div>
<div class="usefullinks">
<h3>Useful Links</h3>
<ul>
<li>Career</li>
<li>Report A Website Issue</li>
<li>About Us</li>
<li>Covid-19</li>
<li>Events</li>
</ul>
</div>
<div class="connect">
<h3>Connect With Us </h3><br>
<a href="https://www.facebook.com" title="facebook"><img class="fb" src="image/fb.png"
alt="Facebook" /></a>
<a href="https://www.twitter.com" title="twitter"><img class="tw" src="image/tw.jpg"
alt="Twitter" /></a>
<a href="https://www.youtube.com" title="youtube"><img class="yt" src="image/you.png"
alt="Youtube" /></a>
<a href="https://www.linkedin.com" title="linkedin"><img class="ln" src="image/linkd.png"
alt="LinkedIn" /></a>
</div>
</footer>
</div>
</div>
</body>
</html>
Note that I also removed the height of the footer in the example above, since it causes some spacing as well.

Website looks off when working on a smaller screen

I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.

Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>

For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)

children not staying inside parent divs

Fiddle: https://jsfiddle.net/uatzust3/
Here is the fiddle for my problem, you'll observe that the children are not staying inside the parent div card and also I want the divs to take full width of parent which they are not taking.
Also, where should I be learning best practices? I am new to the community. Thanks in advance.
The left div(black_container) is short of content but should arrange the height according to the width of the right div(content_container) all the while staying inside the card div.
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</div>

A parent cannot take the height of a direct child if the child is absolute because the absolute elements are removed from the document flow(like floats), so in this case "card" doesn't even know "content_container" even exists .
https://jsfiddle.net/OmarIsComing/eq4L86g9/1/
update:
solution with flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/2/
solution without flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/3/

If flexbox is an option, this is easy :
Add display: flex to your card
Add flex: 1 to the content-container
See demo below:
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
display: flex;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
flex: 1;
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</div>

Use the class card-body, this will keep the contents inside of the card.
<div class="card border-success">
<div class="card-header border-success">
<h3 class="card-title">Card Title</h3>
</div>
<div class="card-body border-success">
<dl>
<dt>
Stuff
</dt>
<dd>
Stuff Details
</dd>
</dl>
</div>
</div>

replace the .content_container css with:
.content_container {
display: inline-block;
padding: 3%;
vertical-align: top;
}
I think the CSS attribute position: absolute; is causing this issue. In short, absolute position removes the element from the flow of other elements; therefore, its height is simply ignored, and never counted in your .card container.

Why won't my divs line up?

Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?

#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.

issue filling div width in css

I am just learning website layout, and I am trying to create a fairly simply page to display some images. I have tried to set something up with a fixed left-hand column, and a fixed banner across the top. I then have a "contentcontainer", in which I put "content". I have done it this way with the intent that:
1.) I can have the "content" width scale to 80% of the available contentcontainer width, with a box shadow effect.
2.) If the content height gets too long, it allows the user to scroll down.
The problem that I have is that I want the "contentcontainer" to take-up the available width, such that the "content" then scales to match. If I set the contentcontainer width to "auto", instead of taking up the available width of the underlying element, it instead scales itself only to what is need for the "content".
I have tried searching here for answers, but am just getting horribly confused. Please advise!
I can make it work on my default screen resolution by setting the contentcontainer width to 89.6%, but that is clearly not the preferred solution. How can I get the contentcontainer width to fill the required space dynamically?
#font-face {
font-family: SourceSans;
src: url('fonts/SourceSansPro-Light.otf');
font-weight: normal;
}
#font-face {
font-family: SourceSans;
src: url("fonts/SourceSansPro-Bold.otf");
font-weight: bold;
}
tr:nth-child(even) {
background: #FFF
}
tr:nth-child(odd) {
background: #E6FCFF
}
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 32px;
padding-left: 20px;
}
h2 {
font-family: SourceSans, sans-serif;
font-size: 42px;
padding-left: 20px;
margin: 2px;
}
h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
img {
vertical-align: middle;
}
body#template {
margin: 0px;
padding: 0px;
border: none;
overflow: auto;
height: 100%;
max-height: 100%;
background-color: grey;
}
div#topimage {
position: fixed;
width: 200px;
height: 120px;
left: 0px;
top: 0px;
background: navy;
color: white;
overflow: hidden;
padding: 20px;
}
div#leftmenu {
position: fixed;
width: 200px;
height: 100%;
left: 0px;
top: 120px;
background: navy;
color: white;
overflow: hidden;
}
div#topbanner {
position: fixed;
width: 100%;
height: 60px;
left: 200px;
top: 0px;
background: navy;
color: white;
overflow: hidden;
padding: 0px;
margin: 0px;
}
div#contentcontainer {
display: inline;
width: 89.6%;
position: fixed;
height: 100%;
top: 60px;
left: 200px;
background: grey;
overflow: auto;
border: none;
}
div#content {
position: relative;
width: 80%;
padding: 10px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 200px;
background-color: #FAFAFA;
border: 1px solid black;
box-shadow: 10px 10px 20px black;
overflow: auto;
height: auto;
padding-bottom: 100px;
}
li {
font-family: SourceSans, sans-serif;
font-size: 24px;
list-style-type: none;
margin-left: -15px;
}
.chart {
box-shadow: 5px 10px 15px #888888;
margin-left: 40px;
display: block;
margin-left: auto;
margin-right: auto;
}
p.chartheading {
font-family: SourceSans, sans-serif;
font-size: 42px;
font-weight: bold;
padding-left: 40px;
padding-bottom: 20px;
margin: 2px;
text-decoration: underline;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<title>Template Example</title>
<link rel="stylesheet" type="text/css" href="template.css"></link>
</head>
<body id="template">
<div id="topimage">
<img src="images/logo.gif"></img>
</div>
<div id="leftmenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="topbanner">
<h2>Template: Page Header</h2>
</div>
<div id="contentcontainer">
<div id="content">
<br></br>
<p class="chartheading">First Chart</p>
<img class="chart" src="graphs/first_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Second Chart</p>
<img class="chart" src="graphs/second_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
<br></br>
<p class="chartheading">Third Chart</p>
<img class="chart" src="graphs/third_chart.png"></img>
<br></br>
</div>
</div>
</body>
</html>

You can use calc add this to your CSS:
div#contentcontainer {
width: calc(100% - 200px);
}
http://jsfiddle.net/8bk21tx6/
Leave you comments below if that fixes the issue.