I am trying to hone my skills in on html5/css, by attempting a portfolio. The issue I am running into, is I have 3 inline-block divs, wrapped in a container div, but whenever I add more than 1 line of text (whether an h1 and h2 or h1 and a p) to only 1 div or all but 1, it shifts the other inline-block divs down. Shouldn't the inline-block div's stay where they are since the text is internal to that div? Furthermore, why are they breaking out of their parent/container div? Thanks for any help!
David
HTML
<html>
<head>
<title>Test Div - Portfolio</title>
<link rel="stylesheet" type="text/css" href="./style/alpha.css">
<link rel="stylesheet" type="text/css" href="./style/grid-alpha.css">
</head>
<body>
<header id="logo-bar">
<img src="#">
</header>
<div class="container">
<a href="#">
<div class="maps">
<h1>Level Design</h1>
<p>Check out some maps!</p><p>And even cooler maps!</p>
</div>
</a>
<a href="./sounds.html">
<div class="sound">
<h1>Sounds</h1>
</div>
</a>
<div class="proj">
<h1>Current</h1>
<p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div>
</div>
<footer>2020 Test | Contact</footer>
</body>
</html>
CSS
/*** Fonts ***/
#font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mavenpro/v20/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
color: white;
}
body {
background-color: black;
}
header, footer {
background-color: #2d3436 !important;
}
h1, h2, h3, a, p {
font-family: "Maven Pro";
color: #dfe6e9;
}
a, a:active, a:hover, a:visited {
text-decoration: none;
color: #dfe6e9;
}
.container {
height: 85%;
width: 100%;
}
/** Div Backgrounds **/
#logo-bar {
background-color: white;
width: 100%;
height: 10%;
display: block;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.maps {
background-color: #7f8c8d;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.sound {
background-color: #2980b9;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.proj {
background-color: #2c3e50;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.maps, .sound, .proj {
text-align:center;
}
/*** Footer***/
footer {
background-color: white/**#2c3e50**/;
font-family: "Maven Pro";
text-align: center;
font-size: 14px;
font: #95a5a6;
text-transform: uppercase;
position: absolute;
bottom: 0px;
width: 100%;
height: 5%;
vertical-align: middle;
}
Hi you missing a property for your children container tag.
Add vertical-align: top for each element with a display`
Let the classes maps, sound and proj the direct childs of the contanier div as follow
<div class="container">
<a href="#" class="maps">
<div>
<h1>Level Design</h1>
<p>Check out some maps!</p>
<p>And even cooler maps!</p>
</div>
</a>
<a href="./sounds.html" class="sound">
<div>
<h1>Sounds</h1>
</div>
</a>
<div class="proj">
<h1>Current</h1>
<p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div>
</div>
and float them to left
.maps, .sound, .proj{
float: left;
}
and insted of repeating the same code for the three classes
use this code
.maps, .sound, .proj {
text-align:center;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
float: left;
}
.maps {
background-color: #7f8c8d;
}
.sound {
background-color: #2980b9;
}
.proj {
background-color: #2c3e50;
}
Related
I am currently new to the community, and would love some help with a HTML site I am creating for a friend of mine.
Basicly I man creating a simple website, but I have some issues with the text not going above the footer. I check the code and tried to figure out how to solve this, but I was unable to do so.
My question is: could someone help me putting the text above the footer?
Please let me know !
body {
margin: 0 auto;
min-height: 100%;
background-color: #111;
}
h1 {
color: #fff;
position: relative;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {
height: auto;
width: 100%;
}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
top:0px;
background-color: #111;
}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
width: 100%;
height: 100%;
color:#f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
position: relative;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
background-color: #111;
bottom: 20;
}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {text-decoration: none; color: #fff;}
a:hover{text-decoration: underline;}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
<title>Froluv</title>
<meta name="Froluv." content="PSD to HTML5+CSS3 conversion.">
<meta name="Froluv" content="PSD, HTML5, CSS3">
<meta name="author" content="Vivaco">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="StyleCSS.css">
</head>
<body>
<div class="container">
<!-------------------------------------------------------------------------HEADER------------------------------------------------------------------------->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo"> <!--insert logo here-->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END HEADER----------------------------------------------------------------------->
<!-------------------------------------------------------------------------CONTENT----------------------------------------------------------------------->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1 style="font-family:'Champagne & Limousines';font-weight:normal;font-size:42px">“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END CONTENT-------------------------------------------------------------------->
<!-----------------------------------------------------------------------FOOTER------------------------------------------------------------------------->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!---------------------------------------------------------------------END FOOTER----------------------------------------------------------------------->
</div>
</body></html>
I would avoid using absolute positioning until you have a better understanding of when and where to use it and what problems it helps to solve.
By undoing the absolute positioning you have applied, the content will be in the correct order. Though, may likely need further refinement to fit your needs.
In my example below, I have used flexbox to push the footer to the bottom of the page. You'll also notice I've removed a lot of properties that are not necessary, i.e. width: 100% for a <div> (it does this by default).
body {
margin: 0;
min-height: 100vh;
background-color: #111;
display: flex;
flex-direction: column;
}
h1 {
color: #fff;
position: relative;
font-family: 'Champagne & Limousines';
font-weight: normal;
font-size: 42px;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
color: #f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
flex-grow: 1;
background-color: #111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<!-- HEADER -->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo">
<!-- insert logo here -->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-- END HEADER -->
<!-- CONTENT -->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1>“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- FOOTER -->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!-- END FOOTER -->
As advised minutes ago, just remove the position:absolute from .contentcontainer and it should work: https://jsfiddle.net/ilkovs/yqdg62fe/3/
.contentcontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
instead of :
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
Separate your header and footer. 1. div for header, 2. another div for content 3. footer. in your footer css, add margin-bottom:0; and margin-top: 200px; That is a quick fix, but after separating the three, you can play around the CSS to fit your design need
You should understand how to use position:absolute, if you use absolute you are taking the <Div> out of the flow of the page, so I think you should use relative positioning instead of absolute.
Then again, if you are going to use absolute, you need to specify one of these four(4) properties which are:
top, bottom, left, right, these four properties help you to move the <div> around the page anyhow you like and can help you shift your text up.
Last thing all the different types of positions all use the same four properties I mentioned
I have a H1 that is placed inside a .container div with a width of 800px. I tried giving the H1 a width also and that didn't fix it either. I can't think of any reason why this H1 wouldn't take the full width (taking it out of the .container div makes it work). Any idea what's causing this?
Thanks in advance.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="header-block">
<h2>Cristian M.</h2>
<h3>Product Designer</h3>
<p>Hi, I'm Cristian Moisei and I'm currently a Product Designer at <a id="screencloud-link" href="https://www.screen.cloud">ScreenCloud</a>. I formerly worked as the Lead Product Designer for <a id="glofox-link" href="https://www.glofox.com">Glofox</a> and ran a design studio, <a id="hyperion-link" href="http://www.hyperion.co">Hyperion</a>, for 4 years.</p>
<div id="extra-info">
<p>
Resume <span id="slash">   /   </span>
My Process <span id="slash">   /   </span>
Contact
</p>
<p>I live in London, UK</p>
</div>
</div>
<div id="glofox-block">
<div class="container">
<img src="Images/macbook.png">
<div id="text">
<h1 id="number">01.</h1>
<h1>Reinventing Glofox's interface for a complex user base.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-white.png">
</div>
</div>
</div>
</div>
<div id="webfaction-block">
<div class="container">
<div id="text">
<h1 id="number">02.</h1>
<h1>Helping Webfaction attract a less technical audience.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-black.png">
</div>
</div>
<img id="ipad" src="Images/ipad.jpg">
</div>
</div>
</body>
</html>
CSS:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b4314e71-83d8-4cc4-bd90-9ceb4a5339d0");
#font-face{
font-family:"Tisa W01 Light";
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix");
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix") format("eot"),url("Fonts/163f4b9f-d9b9-42c5-9098-d70e0016ae27.woff2") format("woff2"),url("Fonts/cc68d660-f674-409c-9be1-7f7f8bc0542a.woff") format("woff"),url("Fonts/2385d9d0-f23e-4d30-abb4-28817eda1254.ttf") format("truetype"),url("Fonts/a9d1c46b-d28d-4dab-8373-bbaf41232d7f.svg#a9d1c46b-d28d-4dab-8373-bbaf41232d7f") format("svg");
}
#font-face{
font-family:"Tisa W01 Regular";
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix");
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix") format("eot"),url("Fonts/36a5385d-e6c3-4aba-ad04-fa161f5c96b0.woff2") format("woff2"),url("Fonts/9b2fef91-4d32-413d-864e-4aaa363673eb.woff") format("woff"),url("Fonts/131d9e79-a2a5-4e3a-8cb9-e8acfcaa1c8a.ttf") format("truetype"),url("Fonts/419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b.svg#419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b") format("svg");
}
#font-face{
font-family:"Tisa W01 Medium";
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix");
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix") format("eot"),url("Fonts/785e7c0f-c445-4077-b412-1fd0a1a8ab06.woff2") format("woff2"),url("Fonts/7ee6ca7c-fe74-4640-a75d-939ea0bd637d.woff") format("woff"),url("Fonts/d76d30ec-b31a-4502-acf4-89812c16447e.ttf") format("truetype"),url("Fonts/9ce8adf1-e8ae-4095-84d3-6b2f836cd33e.svg#9ce8adf1-e8ae-4095-84d3-6b2f836cd33e") format("svg");
}
#font-face{
font-family:"Tisa W01 Bold";
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix");
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix") format("eot"),url("Fonts/02a4b96f-e988-44fe-a0e7-57ff1b610f3b.woff2") format("woff2"),url("Fonts/78d1ac04-d453-4364-8326-035a105b0865.woff") format("woff"),url("Fonts/776e5c1b-6939-4b32-9c0d-2dee7c34c7da.ttf") format("truetype"),url("Fonts/edc51787-36cf-434d-a4f1-b04139da6bfc.svg#edc51787-36cf-434d-a4f1-b04139da6bfc") format("svg");
}
/* Global */
body, a {
font-family:"Tisa W01 Light", serif;
color: black;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
border-bottom: 1px solid black;
cursor: pointer;
}
p {
font-size: 19px;
line-height: 1.8;
}
h1{
font-size: 50px;
line-height: 1.2;
margin: 0 0 40px 0;
padding: 0;
}
h2{
font-size: 30px;
margin: 0;
padding: 0;
}
h3{
font-family: "Tisa W01 Medium", serif;
font-size: 26px;
margin: -5px 0 40px 0;
padding: 0;
}
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#view-project{
display: inline !important;
opacity: .5 !important;
border-bottom: 1px solid white;
}
#view-project a{
font-family: "San Francisco", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#view-project img{
width: 15px !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
float: none !important;
}
/* Intro Section */
#header-block{
padding: 140px 50px 140px 50px;
}
#extra-info{
margin-top: 40px !important;
font-size: 18px;
opacity: .4;
}
#extra-info p{
margin: 0;
padding: 0;
}
#extra-info a{
font-family: "Tisa W01 Medium", serif;
}
/* Glofox Section */
#glofox-block{
background-color: #2b4ea4;
height: 800px;
}
#glofox-block #number{
opacity: .2;
font-family: "Tisa W01 Regular", serif;
margin-bottom: 20px;
}
#glofox-block img{
z-index: 1;
width: 740px;
float: left;
margin-top: 60px;
}
#glofox-block .container #text{
position: relative;
top: -790px;
z-index: 2;
float: right;
width: 350px;
color: white;
float: right;
}
#glofox-block #view-project a{
color: white;
border: none;
}
/* Webfaction Section */
#webfaction-block #ipad{
z-index: 1;
width: 795px;
position: relative;
top: -100px;
}
#webfaction-block h1{
width: 750px;
}
#webfaction-block #text{
z-index: 2;
}
In order to fix this you need to add the following line to your CSS:
white-space: nowrap;
Please familiarise yourself with CSS whitespace parameters.
https://www.w3schools.com/cssref/pr_text_white-space.asp
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<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">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I can't wrap my head around this one. I've been working on it for a bit but everything I try and everything I read fails to truly fix the problem.
Problem 1:
My div ".page" is ignoring all of its children divs. Setting it to 100% height and the background color to red for testing results in it only acknowledging certain divs (the .image__header div and the footer). I have set the html and body to width and height 100%; however, this does not resolve the problem.
Problem 2:
This leads to my second problem which would probably be solved by the prior problems solution. Adding the footer and setting a height and background color places the footer directly below the .image__header div. This emphasizes my belief that the other sections (main and nav) are being completely ignored as if they aren't even taking up space (nav is a fixed element glued to the top of my page and main doesn't work even if I change it to a div and "display:block" as it should be innately anyway).
My footer should simply fall below the main section but it fails to acknowledge main's existence.
A couple snippets of code although I have linked the brief CodePen at the bottom.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
img {
display: block;
margin: 0 auto;
}
.page {
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
* ---
* Adding a clearfix to .main__inner resolved this.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen link with full code
To reiterate: I don't need a sticky footer solution or a fixed footer solution. I just need the footer to acknowledge other divs and sit below the main section. Why is the main section being ignored?
Any help is greatly appreciated. Thanks for your time.
Seems like you simply should add a clearfix to your .main__inner block, something like this:
.main__inner:after {
content: '';
display: table;
clear: both;
}
Check out:
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen
Just put float:left; to both containers. I recommend using a div with class instead of footer though... or any semantic elements to be honest.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body,
html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1,
h2,
h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3,
h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
float: left;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
float: left;
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div>
<!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul>
<!-- end nav links -->
</div>
<!-- end .nav__inner -->
</nav>
<!-- end nav -->
<main class="main">
<div class="image__header">
</div>
<!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's
<snip>Raycast</snip> and
<snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a
<snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
<snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div>
<!-- end .main__inner -->
</main>
<!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div>
<!-- end .footer__inner -->
</footer>
<!-- end footer -->
</div>
<!-- end .page__inner -->
</div>
<!-- end .page -->
</body>
</html>
remove float: left from the section with class .content
http://codepen.io/anon/pen/XMrVVv?editors=1100
my website has a scroll bar that goes quite far over to the right and one that goes down. nothing is displayed in these areas so the scroll bar is unecesary! if anything it could fit all on one page. these creates a lot of white space around my page.
how can i stop this from happening?
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->
</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: relative;
top:-100px;
left: 390px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: relative;
top:-250px;
left: 370px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative;
top:-300px;
left: 480px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative;
top:-290px;
left: 390px;
}
.image2 {
position: relative;
top:-300px;
left: 590px;
}
.box1 {
width: 100%;
height: 5px;
background-color: #FC3B3B;
position: relative;
top:100px;
left: 0px;
}
p {
position: relative;
top:150px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>
<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE</h1>
<h2>COMING SOON... </h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<img src="twitter.png" class="image2" border="0" alt=".">
</div>
<div class="box1">
</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>
EDIT: this is how it should look like
It's an artifact of the relative positioning and setting a left value.
Remove it, and the extra space goes away.
Demo
EDIT
You do not need any relative positioning. The design you are trying to accomplish can be created much more simply with text-align: center.
HTML
<div>
<img src="//placehold.it/200x200">
<h1>Welcome to my page</h1>
<h2>Coming Soon...</h2>
<h3>But for now follow me on Twitter</h3>
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Paytone+One);
div {
text-align: center;
background: #ddd;
border-bottom: 3px solid red;
margin: 5px;
padding: 10px;
font-family: 'Paytone One', sans-serif;
font-size: 24px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
color: red;
}
img {
width: 200px;
height: 200px;
}
Demo