I am looking to get my certificate image and the text to the right of the image. I would like them to be next to each other regardless of window size.
<div class="ISO">
<div class="container">
<h2>Certification</h2>
<section class="container">
<div class="row">
<figure class="col-sm-6">
<img src="http://i.imgur.com/wQQP94Y.jpg">
</figure>
<figure class="col-sm-6">
<p><u>GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
<br> CCR and ORCA Registered US Government Sub-Contractor
<br> Company CAGE Code: 4STK5
<br>
<u>Business Certifications:</u>
<br> Veteran Owned - Small Business
<br> ISO 9001-2015 Certificate Number 16.127.1
<br> Labor Surplus Region
<br>
<br>
<u>NAICS Codes:</u>
<br> 332710 – Machine Shops
<br> 332721 – Precision Turned Product Manufacturing
<br>
<br>
<u>Potential Federal Supply Classifications:</u>
<br> 1005/1010 – Guns – 30mm – 75mm
<br> 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
<br> 1660 – Aircraft Air conditioning , heat and pressurizing equipment
<br> 2590 – Miscellaneous vehicle components
<br> 2910/2915 – Fuel System Components
<br> 2930/ 2935 – Engine Cooling System Components
<br> 4130 – Refrigeration and Air Conditioning components
<br> 7320 – Kitchen Equipment and appliances (components)
<br>
<br>
</p>
</figure>
</div>
https://jsfiddle.net/dhalldow/ggzf8acf/
You are using bootstrap classes but you haven't included bootstrap.css in your code. Either include bootstrap css or you can add your custom styles.
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
.col-sm-6 {
width: 50%;
float: left;
}
img {
width: 100%;
}
Add the following styles to your css.
Is your problem that they doe not remain next to each other on a very small screen size?
give your image a width of 100% and use xs for extra small not sm. xs will cover all screen sizes. Startin from the smallest. Also make sure you reference the bootstrap library on your page in order to use the bootstrap classes. P.S - if you want it to be image on the left and text on the right for all screen sizes there is jo need to use bootstrap. You can just give your image a width of 50% and your text elemenf an width of 50% in their own div. Or you can just let your text float right. Anyway here is bootstrap:
<div class="row"><div class="col-xs-6"><img style="width:100%" src="http://i.imgur.com/wQQP94Y.jpg"></div><div class="col-xs-6"><p>random text on th right bla bla bla bla</p></div></div>
Well just use the class col-xs-6 in stead of col-sm-6 and remember to scale those huge images
https://jsfiddle.net/L077a7nd/
do not forget to include bootstrap library, so it should work as expected from the class used. else rewrite it all ...
You can set a ratio to a container using vertical padding with %.
example below using a bg for both image , and a ratio. if you use a pseudo to size container's height, it allows you to set a max-height.
html,
body {
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
}
/* start reset ratio and bg image */
.jumbotron {
background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat top center;
background-size: cover;
width: 100%;
max-height:800px;
overflow:hidden;
}
.jumbotron:before {
content:'';
display:inline-block;
padding-top:66.7%;
}
.imgsz {width:100%;height:0;padding-top:129%;
background:url(http://i.imgur.com/wQQP94Y.jpg);
background-size:cover;
}
/* end demo ratio */
.header {
background-color: #34495E;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
.main {
left: 0px top: 0px;
text-align: left;
}
.main h1 {
color: #2E86C1;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 80px;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
border: 2px double #34495E;
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
text-align: center;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 50px;
margin-bottom: 40px;
}
.col {
display: inline;
}
.clearfix {
clear: both;
}
.history {
border: 2px double #34495E;
}
.history h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.history p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1.3px;
padding: 10px 20px;
display: inline-block;
}
.history ul {
margin: 0;
padding-left: 30px;
}
.history ul li {
margin: 0px;
padding: 0px;
text-indent: 0em;
margin-left: 1em;
}
.history li {
color: #34495E;
font-family: 'Raleway', sans-serif;
}
.About {
border: 2px double #34495E;
}
.About h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.About p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1.3px;
padding: 10px 20px;
display: inline-block;
}
.Contact h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1;
}
.Contact p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: 1.3px;
padding: 10px 20px;
float: left;
text-align: center;
}
.ISO h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1;
}
.ISO p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 10px 20px;
float: right;
}
.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}
.footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="main">
</div>
</div>
</div>
<div class="ISO">
<div class="container">
<h2>Certification</h2>
<section class="container">
<div class="row">
<figure class="col-sm-6">
<img src="http://i.imgur.com/wQQP94Y.jpg" class="imgsz"/>
</figure>
<figure class="col-sm-6">
<p><u>GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
<br> CCR and ORCA Registered US Government Sub-Contractor
<br> Company CAGE Code: 4STK5
<br>
<u>Business Certifications:</u>
<br> Veteran Owned - Small Business
<br> ISO 9001-2015 Certificate Number 16.127.1
<br> Labor Surplus Region
<br>
<br>
<u>NAICS Codes:</u>
<br> 332710 – Machine Shops
<br> 332721 – Precision Turned Product Manufacturing
<br>
<br>
<u>Potential Federal Supply Classifications:</u>
<br> 1005/1010 – Guns – 30mm – 75mm
<br> 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
<br> 1660 – Aircraft Air conditioning , heat and pressurizing equipment
<br> 2590 – Miscellaneous vehicle components
<br> 2910/2915 – Fuel System Components
<br> 2930/ 2935 – Engine Cooling System Components
<br> 4130 – Refrigeration and Air Conditioning components
<br> 7320 – Kitchen Equipment and appliances (components)
<br>
<br>
</p>
</figure>
</div>
your own example fixed with bootstrap + max-width for img:
to load bootstrap:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
to fix max-width to the certificat
.row figure.col-sm-6 > img {
max-width:100%;
}
snippet to run and test below
.row figure.col-sm-6>img {
max-width: 100%;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
}
.jumbotron {
background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat center center;
background-size: 100% 100%;
height: 800px;
max-width: 100%;
}
.header {
background-color: #34495E;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
.main {
left: 0px top: 0px;
text-align: left;
}
.main h1 {
color: #2E86C1;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 80px;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
border: 2px double #34495E;
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
text-align: center;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 50px;
margin-bottom: 40px;
}
.col {
display: inline;
}
.clearfix {
clear: both;
}
.history {
border: 2px double #34495E;
}
.history h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.history p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1.3px;
padding: 10px 20px;
display: inline-block;
}
.history ul {
margin: 0;
padding-left: 30px;
}
.history ul li {
margin: 0px;
padding: 0px;
text-indent: 0em;
margin-left: 1em;
}
.history li {
color: #34495E;
font-family: 'Raleway', sans-serif;
}
.About {
border: 2px double #34495E;
}
.About h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.About p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1.3px;
padding: 10px 20px;
display: inline-block;
}
.Contact h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1;
}
.Contact p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: 1.3px;
padding: 10px 20px;
float: left;
text-align: center;
}
.ISO h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1;
}
.ISO p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 10px 20px;
float: right;
}
.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}
.footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="main">
</div>
</div>
</div>
<div class="ISO">
<div class="container">
<h2>Certification</h2>
<section class="container">
<div class="row">
<figure class="col-sm-6">
<img src="http://i.imgur.com/wQQP94Y.jpg" class="imgsz" />
</figure>
<figure class="col-sm-6">
<p><u>GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
<br> CCR and ORCA Registered US Government Sub-Contractor
<br> Company CAGE Code: 4STK5
<br>
<u>Business Certifications:</u>
<br> Veteran Owned - Small Business
<br> ISO 9001-2015 Certificate Number 16.127.1
<br> Labor Surplus Region
<br>
<br>
<u>NAICS Codes:</u>
<br> 332710 – Machine Shops
<br> 332721 – Precision Turned Product Manufacturing
<br>
<br>
<u>Potential Federal Supply Classifications:</u>
<br> 1005/1010 – Guns – 30mm – 75mm
<br> 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
<br> 1660 – Aircraft Air conditioning , heat and pressurizing equipment
<br> 2590 – Miscellaneous vehicle components
<br> 2910/2915 – Fuel System Components
<br> 2930/ 2935 – Engine Cooling System Components
<br> 4130 – Refrigeration and Air Conditioning components
<br> 7320 – Kitchen Equipment and appliances (components)
<br>
<br>
</p>
</figure>
</div>
Check whether your Bootstrap is properly added.
after that add img-responsive class to img tag, it would solve your problem.
html,
body {
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
}
.jumbotron {
background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat center center;
background-size: 100% 100%;
height: 800px;
max-width: 100%;
}
.header {
background-color: #34495E;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
.main {
left: 0px top: 0px;
text-align: left;
}
.main h1 {
color: #2E86C1;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 80px;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
border: 2px double #34495E;
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
text-align: center;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 50px;
margin-bottom: 40px;
}
.col {
display: inline;
}
.clearfix {
clear: both;
}
.history {
border: 2px double #34495E;
}
.history h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.history p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1.3px;
padding: 10px 20px;
display: inline-block;
}
.history ul {
margin: 0;
padding-left: 30px;
}
.history ul li {
margin: 0px;
padding: 0px;
text-indent: 0em;
margin-left: 1em;
}
.history li {
color: #34495E;
font-family: 'Raleway', sans-serif;
}
.About {
border: 2px double #34495E;
}
.About h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1
}
.About p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1.3px;
padding: 10px 20px;
display: inline-block;
}
.Contact h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1;
}
.Contact p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: 1.3px;
padding: 10px 20px;
float: left;
text-align: center;
}
.ISO h2 {
width: 100%;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #2E86C1;
}
.ISO p {
color: #34495E;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 10px 20px;
float: right;
}
.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}
.footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="main"></div>
</div>
</div>
<div class="ISO">
<div class="container">
<h2 class="hero">Certification</h2>
<section class="container">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://i.imgur.com/wQQP94Y.jpg" />
</div>
<div class="col-xs-6">
<p>
<u class="warning">GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
<br />
CR and ORCA Registered US Government Sub-Contractor
<br />
Company CAGE Code: 4STK5
<br />
<u>Business Certifications:</u>
<br />
Veteran Owned - Small Business
<br />
ISO 9001-2015 Certificate Number 16.127.1
<br />
Labor Surplus Region
<br />
<br />
<u>NAICS Codes:</u>
<br />
332710 – Machine Shops
<br />
332721 – Precision Turned Product Manufacturing
<br />
<br />
<u>Potential Federal Supply Classifications:</u>
<br />
1005/1010 – Guns – 30mm – 75mm
<br />
1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
<br />
1660 – Aircraft Air conditioning , heat and pressurizing equipment
<br />
2590 – Miscellaneous vehicle components
<br />
2910/2915 – Fuel System Components
<br />
2930/ 2935 – Engine Cooling System Components
<br />
4130 – Refrigeration and Air Conditioning components
<br />
7320 – Kitchen Equipment and appliances (components)
<br />
<br />
</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Related
Hello I wanted my webpage to have a sort of "locked" sidebar, but whenever I scroll down my sidebar also scrolls down is there any way that I can make my sidebar "not" be included whenever I scroll down?
Here are my code snippets
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
#import url("https://use.typekit.net/imp2prc.css");
*{
box-sizing: border-box;
}
body{
margin:0;
min-height: 100vh;
display: flex;
}
.content{
background-color: #EFEFEF;
flex-grow: 1;
min-height: 100vh;
}
.banner{
background-image: url("banner.png");
position: relative;
min-width: 100%;
background-position: center;
background-size: cover;
height: 7rem;
box-shadow: inset 0 -20px 50px black;
display: flex;
}
.container-content{
margin-left: auto;
margin-right: auto;
padding: 1rem;
flex-grow: 1;
}
h3{
font-family: 'Raleway', sans-serif;
font-size: 15px;
text-align: center;
color: white;
margin-top: 0;
}
h3:hover{
transition: 0.1s;
background-color: #9e9b9b;
color: #1c1c1c;
height: 60px;
margin-top: -17px;
padding-top: 17px;
}
.sidebar{
min-height: 100%;
position: sticky;
overflow: auto;
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 0 rgba(0, 0, 0, 0.19);
display: flex;
min-width: 245px;
background-color: #262626;
padding-top: 20px;
}
.sidebarlogo{
max-width: 245px;
}
.header{
height: 60px;
background-color: #5c5b5b;
padding-top: 17px;
}
.menu a{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
padding: 15px 6px 15px 16px;
text-decoration: none;
font-size: 17px;
color: white;
z-index: 1;
top: 0;
left: 0;
display: flex;
margin: 0;
}
.menu a:hover {
transition: 0.5s;
Background-color: #1b1b1b;
text-decoration: underline;
}
.fa-building-columns{
padding-right: 12px;
font-size: 39px;
}
.fa-books{
padding-right: 12px;
font-size: 39px;
}
.fa-users{
padding-right: 12px;
font-size: 32px;
}
.fa-megaphone{
padding-right: 12px;
font-size: 36px;
}
.fa-arrow-right-from-bracket{
padding-right: 12px;
font-size: 39px;
}
.mcm{
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
padding-top: 10px;
background-color: white;
width: 100%;
height: 54rem;
max-width: 100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin: auto;
display: block;
}
.image{
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
height: 330px;
width: auto;
margin: auto;
display: block;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.image:hover{
opacity: 80%;
transition: 0.3s;
}
p.p{
font-size: 17px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
text-align: center;
}
p.p1{
margin-top: 20px;
text-align: center;
font-family: source-sans-pro, sans-serif;
font-size: 22px;
font-weight: 900;
font-style: normal;
color: #1a3473;
}
p.desc{
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;
text-align: justify;
margin-left: 180px;
margin-right: 180px;
margin-top: 24px;
}
p.desc2{
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;
text-align: justify;
margin-left: 180px;
margin-right: 180px;
margin-top: -5px;
}
ul.list{
margin-left: 165px;
margin-right: 180px;
margin-top: -5px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;
}
p.desc3{
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;
text-align: justify;
margin-left: 180px;
margin-right: 180px;
margin-top: -5px;
}
div.mcm1{
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
padding-top: 10px;
background-color: white;
width: 100%;
height: 40rem;
max-width: 100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin: auto;
display: block;
}
p.pp{
font-size: 28px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
text-align: center;
}
hr.line{
margin-top: -20px;
border-top: 2px solid red;
width: 150px
}
a.x1{
text-decoration: none;
color:#DD251B;
}
p.pp1{
margin-left: 70px;
color:#DD251B;
font-size: 17px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
div.x{
margin-left: 70px;
margin-top: 9px;
color:#DD251B;
font-size: 17px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list2{
margin-left: 50px;
margin-top: 8px;
color:#090E35;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list2 a{
color: inherit;
text-decoration: none;
}
div.x2{
margin-left: 70px;
margin-top: 9px;
color:#DD251B;
font-size: 17px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list3{
margin-left: 50px;
margin-top: 8px;
color:#090E35;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list3 a{
color: inherit;
text-decoration: none;
}
div.x3{
margin-left: 500px;
margin-top: -295px;
color:#DD251B;
font-size: 17px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list4{
margin-left: 480px;
margin-top: 8px;
color:#090E35;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list4 a{
color: inherit;
text-decoration: none;
}
div.x4{
margin-left: 500px;
margin-top: 0px;
color:#DD251B;
font-size: 17px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list5{
margin-left: 480px;
margin-top: 0px;
color:#090E35;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list5 a{
color: inherit;
text-decoration: none;
}
div.x6{
margin-left: 70px;
margin-top: -20px;
color:#DD251B;
font-size: 17px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list6{
margin-left: 50px;
margin-top: 8px;
color:#090E35;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 600;
font-style: normal;
}
ul.list6 a{
color: inherit;
text-decoration: none;
}
<!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="icon" type="image/x=icon" href="form.png">
<link rel="stylesheet" href="IP.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<script src="ip.js"></script>
<title>Institution Page</title>
</head>
<body>
<aside class="sidebar">
<span>
<img class="sidebarlogo" src="sidebarlogo1.jpg">
<div class="header">
<h3>Welcome to the Institution Page!</h3>
</div>
<br>
<div class="menu">
<i class="fa-regular fa-building-columns"></i>Institution Page
<i class="fa-light fa-books"></i>Courses
<i class="fa-light fa-users"></i>Student Roster
<i class="fa-regular fa-megaphone"></i>Announcements
<br><br><br><br><br><br>
<i class="fa-light fa-arrow-right-from-bracket"></i>Log out
</div>
</span>
</aside>
<main class="content">
<div class="banner"></div>
<div class="container-content">
<div class="mcm" >
<p class="p">
World-Class Mapúa Education right here in Davao City!
</p>
<a href="https://mcm.edu.ph">
<img id="imagemcm" src="mcm1.jpg" class="image">
</a>
<p class="p1">
Malayan Colleges Mindanao, A Mapúa School
</p>
<p class="desc">
<strong style="color:#090E35">Malayan Colleges Mindanao (MCM)</strong>, a branch encompassing
Mapua University’s technological and academic excellence
in Mindanao, has occupied a 3-hectare land area along Gen.
Douglas MacArthur Highway, beside Matina Town Square in Matina, Davao City.
</p>
<p class="desc2">
<strong style="color:#090E35">MCM</strong> has built a community of competent and innovative leaders who possess
attributes that make them globally competitive and locally in-demand,
distinguishing itself from the rest through these important facets in its educational system:
<ul class="list">
<li>Learner-Centered Outcomes-Based Education</li>
<li>Blended Online and Face-to-Face Learning Sessions</li>
<li>Industry Partnerships</li>
<li>Mindanao-Centric Learning</li>
<li>Advanced Learning Facilities </li>
</ul>
</p>
<p class="desc3">
Within MCM’s DNA is the academic excellence that Mapúa is known for, and we are committed
to bringing about the same level of excellence into our community here in Mindanao.
</p>
</div>
<br>
<div class="mcm1" >
<p class="pp">
WHAT <strong style="color:#DD251B">MCM</strong> OFFERS
</p>
<hr class="line">
</hr>
<p class="pp1">
<a class="x1" href="https://mcm.edu.ph/junior-high-school-jhs/">
JUNIOR HIGH SCHOOL
</a>
<div class="x">
SENIOR HIGH SCHOOL
</div>
<ul class="list2">
<li>Arts and Design Track (AD)</li>
<li>Accountancy, Business and Management (ABM)</li>
<li>Humanities and Social Sciences (HUMSS)</li>
<li>Science, Technology, Engineering and Mathematics (STEM)</li>
<li>Information and Communications Technology (ICT)</li>
</ul>
<div class="x2">
COLLEGE OF BUSINESS
</div>
<ul class="list3">
<li>Accountancy (ACT)</li>
<li>Management Accounting (MA)</li>
<li>Entrepreneurship (ENT)</li>
<li>Tourism Management (TM)</li>
</ul>
<div class="x3">
COLLEGE OF ARTS AND SCIENCE
</div>
<ul class="list4">
<li>Biology (BIO)</li>
<li>Communications (COMM)</li>
<li>Multimedia Arts (MMA)</li>
<li>Psychology (PSY)</li>
</ul>
<div class="x4">
COLLEGE OF ENGINEERING AND ARCHITECTURE
</div>
<ul class="list5">
<li>Architecture</li>
<li>Chemical Engineering</li>
<li>Civil Engineering</li>
<li>Computer Engineering</li>
<li>Electrical Engineering</li>
<li>Electronics Engineering</li>
<li>Industrial Engineering</li>
<li>Mechanical Engineering</li>
</ul>
<div class="x6">
COLLEGE OF COMPUTER AND INFORMATION SCIENCE
</div>
<ul class="list6">
<li>Computer Science (CS)</li>
<li>Information Systems (IS)</li>
<li>Entertainment and Multimedia Computing (EMC)</li>
</ul>
</p>
</div>
</div>
</main>
</body>
</html>
Please ignore some missing images. Feel free to suggest some solutions to my problem Thanks!
Because your sidebar and the content div are inside the same tab ( which is the body ) and the entire body is in overflow, which makes the entire body scrollable.
you can avoid this by making the content div scrollable
.content{
height: 100vh;
overflow-y: auto;
}
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed last year.
I'm experimenting with CSS in a codecademy project, and I noticed that when I set a footer to have fixed positioning (with no left/right/top/bottom properties set), it just disappears. I would expect it to just shrink the way it does with absolute positioning, but it doesn't. Without fixed positioning the footer is there where it should be, but with it, it's gone. Why is it behaving this way?
The footer in question is selected in the CSS in the footer ruleset.
Here's the codepen: https://codepen.io/megas4ever/pen/ExwEEzv
And here's the full code:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
#media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="container">
<h1>We are Broadway</h1>
Get Started
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
Well, you've kind of hinted at the problem yourself already.
I noticed that when I set a footer to have fixed positioning (with no
left/right/top/bottom properties set), it just disappears.
Just because you haven't provided left/right/top/bottom properties, doesn't mean they are not in effect.
In this case, the default values (which most likely reflect the effective top/left values with the default position: static) are just not ideal.
Since the footer takes up the full width of the screen, the left value likely defaults to 0; this is fine and that's not the source of the problem.
But, since the footer is located on the bottom of your site, its auto/default top value max well be like 2000px -> you have to scroll down to even be able to see it.
Once you enabled fixed positioning, and didn't provide any top value yourself, that number would still be top: 2000px. And since it's now fixed in place, scrolling has no effect on it, which means its permanently located outside of your viewport. If your browser window was to be >2000px high, you would be able to see it, just hovering along by itself way below the rest of the site.
As Raxi has pointed out in the answer the rule of thumb is position:absolute affixes it self to parent element axis.
BUT
position:fixed affixes it self to the view port it does not care about anything else in between.
So when you adding position:fixed its goes to viewport which can be any thing based on your device or what ever as Raxi pointed out.
SIMPLyPUT its there but not in your field of vision becuase it made up its own mind where to place it self in empty vast space of view port.
NOW if we give it some coordinates it will behave as expected that is bootom:0; example below. but there is another problem hope you can pick it up.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
bottom:0;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
#media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="container">
<h1>We are Broadway</h1>
Get Started
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
PROBLEM when we added position:fixed and gave coord bottom:0 footer did find its elf in field view of view port but it has resized the width as it was display:inline element not as an display:block element.
its quirk mode sort of problem we have work arounds e.g. giving left:0; right:0; bottom:0; would sort of display as if block element, better option would be to give it width:100% 100% based on view port size etc which works great if there is no desired margin around body tag which 99% of websites specifically dont just as in your case example below;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
display: inline-block;
width: 80px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
bottom:0;
width:100%;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
width: 200px;
height: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
#media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="container">
<h1>We are Broadway</h1>
Get Started
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
<div class="col">
<img src="https://content.codecademy.com/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
Learn More<br>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
I am having a little bit of trouble figuring this out.
On the site I am working on, in between the two sections and footer, there seems to be a blank space with the background color showing, and I can't figure out how to get rid of that so the sections and footer sit on top of each other with no space between them. If someone could check out the code, it'll be much appreciated.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
1) you can just delete margins for sections and increase paddings instead;
OR
2) You can make body background white, and than change add background color and padding bottom to sign-up-form
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
background: #5CDB95;
padding-bottom: 50px;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Use Margin for section margin: 0px;
There you go.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
text-align: center;
margin-top:-50px;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
I had what seemed like a pretty easy problem to solve, my jumbotron image is not scaled correctly; leaving a rather large image (5560 × 1592) a little bit blurry:
My index.html is the following:
<div class="jumbotron">
<div class="container">
<div class="title">
<astrobox>astrobox</astrobox>
<io>.io</io>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
</div>
<div class="jumbotron_paragraphs">
<p><p1>$Supporting /[] Professional_Astronomers<p1></p>
<p><p2>Serving the research of those studying in the field of astronomy and astrophysics.</p2></p>
<div class="learn_more">
<p>Learn More</p>
</div>
</div>
</div>
</div>
My CSS is:
.jumbotron {
background-image:url('https://farm9.staticflickr.com/8679/16635810101_037dda36eb_s.jpg');
background-color: #000000;
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:10px;
}
.jumbotron astrobox {
color: #fff;
font-size: 100px;
font-family: 'Basic', sans-serif;
font-weight: bold;
display: inline;
}
.jumbotron io {
color: #fff;
font-size: 48px;
font-family: 'Lobster', sans-serif;
font-weight: bold;
display: inline;
}
.jumbotron .container p {
font-size: 13px;
color: #fff;
text-align: center;
font-family: verdana;
}
.jumbotron_paragraphs p1 {
font-size: 13px;
color: #fff;
text-align: center;
letter-spacing: 4px;
}
.jumbotron_paragraphs p2 {
font-size: 13px;
color: #fff;
text-align: center;
letter-spacing: 4px;
}
Any hints or tips on how to do this would be greatly appreciated.
So flikr seems to be really poor at displaying the image and hosting photos...why have they made their service worse? Dropbox is 100% better for the jumbotron images.
.jumbotron {
background-image:url('https://dl-web.dropbox.com/get/xxx.jpg?_subject_uid=xxx');
height: 520px;
background-repeat: no-repeat;
background-size: cover
}
.jumbotron .title {
text-align: center;
}
.jumbotron .container {
position: relative;
top:10px;
}
.jumbotron astrobox {
color: #ffffff;
font-size: 100px;
font-family: 'Basic', sans-serif;
font-weight: bold;
display: inline;
}
.jumbotron io {
color: #ffffff;
font-size: 48px;
font-family: 'Lobster', sans-serif;
font-weight: bold;
display: inline;
}
.jumbotron .container p {
font-size: 13px;
color: #ffffff;
text-align: center;
font-family: 'Droid Sans', sans-serif;
}
.jumbotron_paragraphs p1 {
font-size: 13px;
color: #ffffff;
text-align: center;
letter-spacing: 4px;
}
.jumbotron_paragraphs p2 {
color: #ffffff;
font-size: 13px;
text-align: center;
letter-spacing: 4px;
}
.jumbotron_paragraphs .jumbotron_image {
padding-bottom: 0px;
margin-bottom: 5px;
}
Please help!
I tried many tricks to remove the white space under my footer but none of them solved my problem. I noticed that the white space is only visible in the pages with text, p and h1 tags. Any help is highly appreciated.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Olive Green Studio</title>
<link href="oliva.css" rel="stylesheet" type="text/css" />
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]—>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header"><!-- end #header -->
<div id="logo">
<a href="index.html">
<img src="olivaimages/olivegreenlogoweb.png" border="none"/>
</a>
</div>
<div id="sidebar1">
<ul>
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- end #sidebar1 --></div>
</div>
<div id="mainContent">
<h1>Contact Us </h1>
<p>If you need a creative help or want to take your project to the next level please don't hesitate to drop us a line.</p>
<a class="worklinks" href= "mailto:info#olivegreenstudio.com"> info#olivegreenstudio.com</a>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div class="clearfooter"></div>
<!-- end #container -->
</div>
<div id="footerframe">
<div id="footer">
<div id="footer2">
<div id="address">Khobar<br> Saudi Arabia </div>
<div id="contact">
<strong>Services:</strong><br> Logos<br>Branding<br>Identity<br>Collaterals<br>Packaging<br> Web Design & Development <br>
</div>
<div id="email">
If you have a project inquiry, we will be happy to answer you <a class="contactlink" href="mailto:info#olivegreenstudio.com"> here.</a>
</div>
<div class="social">
<div class="twitter">
<a href="https://twitter.com/OliveGreenSTU" />
<img src="olivaimages/twitterbirdwebgreen.png" onmouseover="this.src='olivaimages/twitterbirdweb-lightgreen.png'" onmouseout="this.src='olivaimages/twitterbirdwebgreen.png'" />
</div>
</a>
<div id="pinterest">
<a href="http://pinterest.com/olivegreenstu/">
<img src="olivaimages/pinterestwebgreen.png" onmouseover="this.src='olivaimages/pinterestweb-lightgreen.png'"
onmouseout="this.src='olivaimages/pinterestwebgreen.png'" />
</a>
</div>
<div class="copywrite"> © 2013 Olive Green. All rights reserved.</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
height: 100%;
}
.twoColFixLtHdr #header {
height: 170px;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
padding: 0;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #5A6219;
text-decoration: none;
font-style: normal;
font-weight: normal;
padding-bottom: 20px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #908B23;
text-decoration: none;
line-height: 1.5em;
margin-bottom: 30px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #908B23;
text-decoration: none;
margin: 0px;
}
.twoColFixLtHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
min-height: 100%;
margin-top: 0;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: -215px;
height: 100%;
}
.twoColFixLtHdr #mainContent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.workmaincontent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColFixLtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 300px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
margin-top: 70px;
background-color: #FFFFFF;
height: 30px;
}
#sidebar1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 200px;
line-height: 1.5em;
text-decoration: none;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 500px;
}
#sidebar1 ul {
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#sidebar1 li {
display: run-in;
list-style-type: none;
}
#sidebar1 a {
display: run-in;
text-decoration: none;
color: #918C10;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
padding: 5px;
float: left;
width: 65px;
}
#sidebar1 a:hover {
color: #5A6219;
}
.worklinks{
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.worklinks:hover{
font-family: Arial, Helvetica, sans-serif;
color: #908B23;
text-decoration: none;
}
#print{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-right: 85px;
}
#web{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-top: 50px;
margin-bottom: 50px;
}
#packaging{
background-color: #FFF;
height: 100%;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
}
.imagetitles a {
text-decoration: none;
font-family: "Century Gothic";
font-size: 25px;
font-style: normal;
font-weight: normal;
color: #00CCCC;
}
#printtitle{
bottom: -5px;
left: 333px;
}
#webtitle{
position: absolute;
left: 333px;
top: 521px;
}
#packagingtitle{
position: absolute;
left: 317px;
top: 823px;
width: 89px;
}
#bigimages{
width: 570px;
height: 100%;
}
.imagestalk {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
font-size: 14px;
line-height: 1.5em;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
}
.thumbnails {
border: 5px solid #666666;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #5A6219;
text-decoration: none;
}
h3 a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
h3 a:visited {
color: #D0BA0B;
text-decoration: underline;
}
h3 a:hover {
color: #5A6219;
}
h3 a:active {
color: #579835;
}
.back{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
padding-left: 520px;
}
.back a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
}
.back a:visited {
color: #666666;
text-decoration: none;
}
.back a:hover {
color: #000000;
text-decoration: none;
}
.back a:active {
color: #333333;
text-decoration: none;
}
.source{
font-size: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
}
.workimage {
height: 150px;
width: 200px;
float: left;
margin: 20px;
}
img {
border: 0;
}
#logo {
height: 150px;
width: 300px;
float: left;
}
#footerframe {
width: 100%;
background-color: #AEA03A;
height: 215px;
position: relative;
float: right;
}
#footer {
width: 900px;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: #AEA03A;
float: none;
position: relative;
height: 215px;
}
#footer2 {
width: 100%;
background-color: #AEA03A;
padding-top: 30px;
float: left;
position: relative;
}
#address {
height: 50px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
color: #5A6219;
line-height: 1.5em;
}
#contact {
height: 130px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
margin-right: 180px;
margin-left: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
line-height: 18px;
}
#email {
background-color: #AEA03A;
height: 50px;
width: 180px;
float: right;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
}
.social {
background-color: #AEA03A;
height: 35px;
width: 100%;
float: right;
margin-top: 20px;
}
#pinterest {
height: 20px;
width: 20px;
float: left;
background-repeat: no-repeat;
margin-left: 15px;
margin-bottom: 15px;
}
.twitter {
height: 20px;
width: 20px;
background-repeat: no-repeat;
float: left;
margin-bottom: 15px;
}
.copywrite {
font-size: 11px;
font-weight: lighter;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
width: 300px;
background-color: #AEA03A;
float: right;
height: 15px;
color: #5A6219;
vertical-align: middle;
margin-bottom: 10px;
margin-top: 5px;
}
.contactlink {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink a {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink:hover {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
h4 {
color: #5A6219;
}
.indeximg {
height: 100px;
width: 900px;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../olivaimages/indeximg.png)
}
.indexwrap {
height: 100%;
width: 810px;
padding-left: 90px;
}
#wrapper {
min-height: 100%;
}
.clearfooter {
height: 215px;
clear: both;
}
try this
#footerframe {
background-color: #AEA03A;
bottom: 0;
float: right;
height: 223px;
position: absolute;
width: 100%;
}
Replacing the footers 900px with 100% should do the trick.
I think you'll need implement a sticky footer technics by setting html,body height to 100% and
setting id#container as the following:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: auto !important;
min-height: 100%;
height: 100%;
}
example