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.
Related
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.
My website wrapper will not fill in the entire height of the page. I have tried adjusting the min-height to 100%, tried just height 100% as well. I have tried auto height. I am sure it is something simple I am missing but I can't seem to find the solution to this problem. I have also tried just adding the CSS to the HTML page using the tag but that does not work either.
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005D;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px" />
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
try it:
html,
body {
height: 100%;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005d;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
height: 100%;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005d;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img
src="Images/GCSCU_Color.png"
alt="Logo"
style="float:left;width:120px;height:70px; padding-right:10px"
/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>
This is just a test sentence for the main section of the
page.
</h2>
</main>
</div>
</div>
Please give height: 100%; and margin: 0; for html and body.
Your css will have below changes:
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
height: 100%;
margin: 0;
}
html {
height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
See working jsfiddle - here
Instead of percentage use Viewport units, in this case vh for height:
html, body {
min-height:100vh;
margin:0;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100vh;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
<title>CRIF Access Homepage</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px"/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
</body>
</html>
I'm wondering why do you want (or need) the wrapper, you can do the job only with body.
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.
So I've been testing how my website looks with different screen sizes and I noticed my footer is positioned correctly at the bottom right of the screen for resolutions 800x600 to 1920x1080 BUT on 2560x1600 it does NOT position at the bottom right
/w h y/ ?
Im using CrossBrowserTesting
Here's my code:
body {
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
}
#wrapper {
position: relative;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 93%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Is this an error in my code or this a bug in CrossBrowserTesting?
Any assistance is greatly appreciated!
If you replace your :
#footer {
padding-left: 93%;
}
with
#footer {
float: right;
margin-right: 10px;
}
You will fix your div on the right and that regardless if the screen is large, medium or small.
your #wrapper streches and its css is - max-width: 100%;and your #footer is inside the #wrapper
soo maybe your content doesnt stretch the wrapper to full width and thats why the #footer isnt in the far right of screen(because its in far right of #wrapper)try to take #footer out of #wrapper OR make #wrapper width:100% and body and html width:100%
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.