Assume following html page:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="leftcolumn"/>
<div id="content/>
<div id="footer"/>
</div>
</body>
</html>
What I'm trying to achieve is that the leftcolumn div and the content div always have the same height. Sometimes the leftcolumn div is higher than the content div because there is little content and vice versa: when there is a lot of content, the content div is higher than the leftcolumn div.
The situation as it is now produces some lay-out shenanigans because the body background, leftcolumn background and content background are all in a different colour.
This is my CSS as-is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
height: auto;
}
#content {
float: left;
color: #006350;
background: #DEE3DC;
height: 100%;
display: inline;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#leftcolumn {
color: white;
background: #006350;
height: 100%;
width: 170px;
float: left;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
I've tried using a combination of CSS styles like height: 100%, height:inherit, height:auto,... on the different divs (wrapper, leftcolumn and content) but I can't seem to get the result I want. Bottom line: what CSS styles should I use if I want the leftcolumn and content div have the same height, regardless of which one is higher at that time. (And without using javascript please).
JsFiddle example where the leftcolumn is larger: http://jsfiddle.net/CQPnF/4/
Example where the content is larger: http://jsfiddle.net/BQkme/
You can get your desired results with the use of display:table-cell rather float in your left and right panels :-
I have removed float from your #content & #leftcolummn and gave them display:table-cell; and its working fine as per your requirement.
UPDATED CSS
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
overflow:hidden;
}
#content {
color: #006350;
background: #DEE3DC;
display:table-cell;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#container {
border:1px solid red;
overflow:hidden;
}
#leftcolumn {
color: white;
background: #006350;
width: 170px;
display:table-cell;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
see the demo :- http://jsfiddle.net/BQkme/10/
This solution is a teensy bit hacky because you need some supporting markup, but it does work and I have used it before.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
The main issue I have with it is that you have to nest your content divs to a depth equaling the number of columns. In your case, it's not a huge problem because you'd only be nesting your content inside 2 container divs.
Your markup might end up looking something like the following:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="container_content">
<div id="container_leftcolumn">
<div id="leftcolumn"/>
<div id="content/>
</div>
</div>
<div id="footer"/>
</div>
</body>
</html>
You need to use absolute positioning.
Here is a working Live Demo.
Hope this helps.
Related
My site is fine until I go lower than 723px wide then a white margin appears on the right side of all of my background colors. I have tried to go in and delete margins and padding to see where I have gone wrong. I also played with the width of the elements and it just stretches the image over the visible portion when I set the image to full. I've inspected the page and can not define the white space on the page and where it comes from.
I also tried adding display:inline-block; to my css background divs as well as setting the width: 100%.
CSS
body {
margin: 0;
font-family: 'Comic Neue', sans-serif;
}
main {
margin-top: none;
}
.hero_image {
background-image: url("C:/Users/Kascey.Malone/Documents/Websites/Midterm/images/669.png");
height: 100vh;
width: 100%;
position: relative;
background-size: 100% 100%;
display:inline-block;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
header a {
font-weight: bold;
color: #FCD90A;
}
header a:link {
text-decoration: none;
}
header a:visited {
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
header a:active {
text-decoration: underline;
}
.topnav {
overflow: hidden;
text-decoration: none;
}
.left {
padding: 20px;
float: left;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: left;
}
.right {
padding: 20px;
float: right;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
/*HERO BOX*/
.hero {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero h1 {
font-size: 15vw;
margin: 0;
text-align: center;
color: #9A1000;
font-style: italic;
}
.hero button {
padding: 1em;
margin-top: 10vh;
background-color: #FCD90A;
white-space: nowrap;
font-size: 1vw;
font-family: 'Comic Neue', sans-serif;
}
.hero button a{
text-decoration: none;
color: black;
}
.hero button a:link {
text-decoration: none;
}
.hero button a:visited {
text-decoration: none;
}
.hero button a:hover {
font-weight: bold;
}
.hero button a:active {
font-weight: bold;
}
.container {
position: relative;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*MENU TABLE*/
.table {
background-color: white;
padding-top: 100px;
padding-bottom: 100px;
box-sizing:border-box;
}
table {
margin-left: auto;
margin-right: auto;
padding: 40px;
font-size: 1vw;
background-color: white;
border: solid 8px black;
box-sizing:border-box;
}/*Add border.*/
thead {
text-align: right;
}
td:nth-child(even) {
text-align: left;
padding-left: 100px;
}
td:nth-child(odd) {
text-align: right;
padding: 10px;
}
.row {
display: flex;
margin: 0 auto;
}
table a{
text-decoration: none;
color: black;
} /*Change color based off background*/
table a:link {
text-decoration: none;
}
table a:visited {
text-decoration: none;
}
table a:hover {
text-decoration: underline;
}
table a:active {
text-decoration: underline;
}
th {
padding: 10px;
}
/*ABOUT TEXT*/
.about {
height: auto;
padding-top: 5vh;
padding-bottom: 5vh;
background-color: #3823FC;
background-size: 100% 100%;
}
.column {
flex: 50%;
padding: 10px;
}
.column h2{
font-size: 2vw;
padding-left: 200px;
color: white;
}
.column p{
padding-right: 200px;
padding-top: 88px;
font-size: 1.5vw;
color: white;
}
.column img {
width: 30vw;
padding-left: 200px;
height: auto;
}
/*FOOTER*/
.footer {
background-color: #0C026C;
padding: 10px;
text-align: left;
color: white;
}
Try to use percentages for your padding/margins. Your size is scaling based on screen size with the percentages used.
Another option could be using display: flex; with flex containers.
Here is a helpful document to get you started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could also use #Media tags in CSS for different screen sizes to fit things manually. Here is a reference to get you started: W3 Schools Reference
I'm currently trying to get a logo to appear side by side with my header, I can target the logo background just fine however when I try to change the header color it doesn't allow me to. I have tried changing the float to left right and center, center is the best to me personally. Any idea as to why I can change the header color? I posted the code below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
U can't use float for center. If u wanna side-by-side sorting, u use float. But u must use align or text-align for placement to center. Add this code:
.header{
text-align: center;
}
If you want add another logo or text and you want they don't see this you can use div and use this code:
.logo{
width: 250px;
height: 80px;
text-align: center;
background: #ffffff;
}
</style>
</head>
<body>
<div class="logo">
<img src="logo.png"/>
</div>
Here is what I had to do to get the proper results. Both #freginold and #edomingo1 helped resolve the issue. I had to move the div and img to the body from the head, then had to add a id="header" as well to my div which allowed me to make the proper change. Thanks for all the feedback appreciate it :)!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0em;
margin: 0em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: top;
background: #000000;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">
<img src="logo.png" alt="logo"/>
</div>
What are you trying to get the colour on its in its own braces, look at the braces around colour.
You are using a class selector in your HTML markup, but an ID selector in your CSS. Try replacing div class="header" with div id="header" to see the expected results.
You've included your div and img in the head of the document, rather than the body. See the example below. I moved your header into the body, and changed the color to yellow just to show that it can be targeted. (Obviously, the image doesn't load here.)
.header {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
</body>
</html>
.navbar {
overflow: hidden;
background-color: antiquewhite;
position: absolute;
top: 0;
width: 100%;
}
.navbar a {
float: right;
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 22px;
}
.container {
width: 80%;
background: aqua;
margin: auto;
padding: 10px;
}
.main {
padding: 16px;
margin-top: 30px;
width:1000px;
margin-left:15px;
}
#navbarItem {
list-style-type: none;
margin: 0;
padding:0;
}
li a:hover {
background-color: #b6ff00;
color: white;
}
.main{
padding-top:100px;
padding-left:100px;
padding-right:100px;
border: 1px solid green;
}
.navbar2{
width:15%;
float:left;
border: 2px solid red;
}
How can I put two divs (.main and .navbar2) together in container div ? I want to put main and navbar div side by side in container. I will make the navbar fixed, so that as I scroll down it will stay in its position. Later I might add 3rd div to the right of website.
HTML:
<div id="wrapper">
<div id="leftcolumn">
Left
</div>
<div id="rightcolumn">
Right
</div>
</div>
CSS:
body {
background-color: #444;
margin: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
}
#leftcolumn, #rightcolumn {
border: 1px solid white;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 250px;
background-color: #111;
}
#rightcolumn {
width: 750px;
background-color: #777;
}
I am pretty new to web development. I have basic experience with html/css and am using bootstrap to create a website just to kind of teach myself. I want my image to cover the whole page which it does when i decrease the size of the browser but when using full screen it adds padding to the side.
full screen example
i have tried some things to fix it like changing padding to -20px or making overflow-x hidden but can't seem to fix it.
bootstrap code
<div id="banner" class="container-fluid">
<div class="col-lg-12 nopadding">
<img src="images/headercopy.jpeg">
</div>
</div>
css code
html, body {
line-height: 1.8;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h3 {
text-align: center;
color: white;
}
.nav {
color: white;
}
.navbar-transparent .navbar-brand {
color: white; //nightalreadycolor
}
.navbar-collapse .page-scroll {
color: white; //nightalreadycolor
}
.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus {
background-color: transparent;
color: #c8e8f4; //light blue
}
.navbar .navbar-transparent .navbar-fixed-type {
background-color: red;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.aboutimage {
background-size: 100% 100%;
}
img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#about {
color: white;
height: 600px;
margin-right: 15px;
text-align: justify;
}
#about p {
display: block;
font-size: 20px;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
color: white;
}
#about p img {
padding-top: 5px;
outline: solid #f00 1px !important;
}
.container {}
#fleet {
border-right: thin solid black;
color: white;
width: 50%;
height: 600px;
float: left;
background-color: grey;
}
#fleet h1 {
text-align: center;
}
#fleet h2 {
padding-right: 10%;
float: right;
}
#rates {
color: white;
width: 50%;
height: 600px;
float: right;
background-color: #574951;
}
#rates h1 {
text-align: center;
}
#contact {
text-align: center;
height: 600px;
color: white;
background-color: #574951;
}
#reservation {
display: inline-block;
height: 600px;
color: white;
text-align: center;
}
Sorry if some of my code seems to be redundant or inefficient like i said I'm still very new to all of this. If there's any other information you need let me know.
Use images as a background. So if it's the #banner div that you want to fill up, your css will be like this:
#banner {
background-image: url('images/headercopy.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Then you just have to use this markup:
<div id="banner" class="container-fluid"></div>
Of course you can set to your css code for the #banner the height you want etc.
I would like to vertically align 2 divs - a footer div at the bottom of my page (about 15px margin from the bottom), and a content div in the center of the page). The webpage will be responsive. Her is the jsfiddle of the page:
https://jsfiddle.net/tyvodoh0/1/
<div class="wrapper">
<div class='center'>
<div id='content'>
<div id='profile_pic'>
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
</div>
<div id='information'>
<h1>Title</h1>
<h2>Subtitle</h2>
<p> 4
down vote
favorite
Does the position of the sun in a hollow earth scenario affect the way light scattering would "color" the sky?
My understanding is the reddish-orange color during sunrise/sunset is caused by the sun being at a more oblique angle in contrast to the standard blue when the sun is fully up.
My intuition states that the sky's color wouldn't change much, or if it did would become a washed out version of whatever it normally would be, ie blue on Earth. The most dramatic coloring that I could imagine would be a gradient from say blue to red as you look from the center of the sky to the horizon, given an Earth colored sun and atmosphere. I doubt the gradient scenario is possible, but it would be neat if it was.
</p>
</div>
</div>
<div class='footer'>
<p>
Div to be set at bottom
</p>
</div>
</div>
</div>
/* css */
h1 {
color: #3a2a0c;
font-size: 47px;
text-transform: uppercase;
margin-bottom: 14px;
}
h2 {
color: #3a2a0c;
font-size: 28px;
text-transform: capitalize;
margin-bottom: 14px;
}
h3 {
color: #926d55;
font-size: 15px;
margin-bottom: 40px;
}
p {
color: #3a2a0c;
font-size: 15px;
text-align: justify;
line-height: 110%;
border-bottom: 1px solid #caccc6;
}
hr {
border-color: #3edf4f6;
margin-top: 50px;
}
.wrapper {
background-color: rgba(255,255,255,0.9);
padding: 0;
margin: 0;
top: 0;
left: 0;
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.center {
display: table-cell;
vertical-align: middle;
background: pink;
float: none;
}
#content {
margin-left: auto;
margin-right: auto;
width: 1235px;
background: red;
}
#profile_pic {
width: 396px;
padding-right: 33px;
float: left;
background: blue;
}
#profile_pic img {
width: 396px;
height: auto;
}
}
#information {
width: 806px;
background: yellow;
float: left;
}
#contact {
font-size: 15px;
color: #926d55;
}
.hide {
display: none;
}
#contact span {
margin-right:22px;
}
#information p {
padding: 40px 0;
}
#left {
float: left;
}
#right {
float: right;
}
.links {
padding-top: 15px;
font-size: 15px;
}
.links img {
margin-right: 6px;
}
.links a {
margin-left: 6px;
margin-right: 6px;
color: #3a2a0c;
}
.links a:last-child {
margin-right: 0px;
}
.links a:hover {
color: #926d55;
}
.footer {
float: none;
position: absolute;
top: 90%;
}
I edited your code to make it responsive. You can work further to fix the position of the image when the window is resize.
h1 {
color: #3a2a0c;
font-size: 47px;
text-transform: uppercase;
margin-bottom: 14px;
}
h2 {
color: #3a2a0c;
font-size: 28px;
text-transform: capitalize;
margin-bottom: 14px;
}
h3 {
color: #926d55;
font-size: 15px;
margin-bottom: 40px;
}
p {
color: #3a2a0c;
font-size: 15px;
text-align: justify;
line-height: 110%;
border-bottom: 1px solid #caccc6;
}
hr {
border-color: #3edf4f6;
margin-top: 50px;
}
.wrapper {
background-color: rgba(255,255,255,0.9);
padding: 0;
margin: 0;
top: 0;
left: 0;
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.center {
display: table-cell;
vertical-align: middle;
background: pink;
float: none;
}
#content {
margin: auto;
width: 100%;
background: red;
padding: 10px;
}
#profile_pic {
width: 396px;
padding-right: 33px;
float: left;
background: blue;
}
#profile_pic img {
width: 396px;
height: auto;
}
/*
#information {
width: 806px;
background: yellow;
float: left;
}
*/
#contact {
font-size: 15px;
color: #926d55;
}
.hide {
display: none;
}
#contact span {
margin-right:22px;
}
#information p {
padding: 40px 0;
}
#left {
float: left;
}
#right {
float: right;
}
.links {
padding-top: 15px;
font-size: 15px;
}
.links img {
margin-right: 6px;
}
.links a {
margin-left: 6px;
margin-right: 6px;
color: #3a2a0c;
}
.links a:last-child {
margin-right: 0px;
}
.links a:hover {
color: #926d55;
}
.footer {
float: none;
top: 90%;
width: 100%;
padding: 10px;
}
<div class="wrapper">
<div class='center'>
<div id='content'>
<div id='profile_pic'>
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/>
</div>
<div id='information'>
<h1>Title</h1>
<h2>Subtitle</h2>
<p> 4
down vote
favorite
Does the position of the sun in a hollow earth scenario affect the way light scattering would "color" the sky?
My understanding is the reddish-orange color during sunrise/sunset is caused by the sun being at a more oblique angle in contrast to the standard blue when the sun is fully up.
My intuition states that the sky's color wouldn't change much, or if it did would become a washed out version of whatever it normally would be, ie blue on Earth. The most dramatic coloring that I could imagine would be a gradient from say blue to red as you look from the center of the sky to the horizon, given an Earth colored sun and atmosphere. I doubt the gradient scenario is possible, but it would be neat if it was.
</p>
</div>
</div>
<div class='footer'>
<p>Div to be set at bottom</p>
</div>
</div>
</div>
The height of the .wrapper is set to: height:100%, you can remove it if you do not need it.
From what I can see you want the wrapper div to cover the 100% of the height and the width of the page, and in order to set the footer at the bottom of the page you need to change the footer class to
.footer {
margin-bottom: 15px;
position: absolute;
bottom: 0;
}
This will allow the div to stay at the bottom with a margin of 15 px.