I have two divs featureText and skillsText one right after the other, I am trying to get the second one to float right of the next one instead of stacking, I have tried position relative on the second one with float left to no avail, the container itself is positioned relative. When I inspect the first div it shows to be super wide yet I have a width set and margins and paddings have been set to 0 to see if that was the problem. This is such a noob problem, but I need help.
live site
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<div id="featureText">
<h1>Recent Works</h1>
</div>
<div id="skillsText">
<h1>Super hero skills</h1>
</div>
<div id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<div id="springmethod">
<h1 class="springmethod">Springmethod.com</h1>
</div>
<div id="goodmorning">
<h1 class="goodmorning">goodmorningmoon.ca</h1>
</div>
</div>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto;
position: relative; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#featureText {
margin-top: 70px;
margin-bottom: 20px;
width: 24%;
background: red; }
#featureText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700; }
#skillsText {
width: 28%;
background: aqua;
position: relative;
float: left; }
#skillsText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700;
margin-top: -10px; }
#siteThumbs {
position: relative;
float: left;
width: 960px; }
#siteThumbs .springmethod {
background: url("../images/springmethod.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs .goodmorning {
background: url("../images/goodmorning.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover .springmethod {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
#siteThumbs a:hover .goodmorning {
background: url("../images/goodmorning.jpg") 0 -241px no-repeat; }
#springmethod {
width: 318px;
position: relative;
float: left; }
#goodmorning {
width: 318px;
position: relative;
float: left; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
Remove margin-top: 70px; from #featureText and float left #skillsText
#featureText {
margin-bottom: 20px;
width: 24%;
background: red;
float: left;
}
#skillsText { float:left; }
Related
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 4 years ago.
I have a responsive background image that I want to vertically center text over. I have tried setting the line height and container height to be equal and absolute positioning top:50% however it doesn't work. I also want the text to stay centered when I change the window size. This is as far as I have gotten. Can anyone help please.
<!DOCTYPE html>
<html>
<head>
<title>Vertical Center Text</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Vertically Center Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.box
{
width: 100%;
height: 700px;
background-color: #1F3AC5;
color: #fff;
float: left;
}
.page-container
{
width: 992px;
margin: 0 auto;
}
.text1
{
float: left;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 20px;
padding: 20px;
line-height: 25px;
}
.text2
{
clear: both;
float: left;
color: #fff;
text-shadow: 2px 2px 4px #000000;
font-size: 60px;
line-height: 65px;
}
/*mobile*/
#media only screen and (max-width: 1200px)
{
.box
{
min-height: 475px;
height: calc(100vw / 1.714);
}
}
#media only screen and (max-width: 992px)
{
.box
{
height: 475px;
}
.text1
{
font-size: 16px;
margin: 0 20px;
}
.text2
{
font-size: 40px;
margin: 0 20px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="page-container">
<div class="text1">Hello World</div>
<div class="text2">How are you?</div>
</div>
</div>
</body>
</html>
I have documented the changes in CSS. Flexbox is used to position the page-container in the center. All floats are removed to keep the document flow intact.
More information on flexbox here.
html,
body {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 700px;
background-color: #1F3AC5;
color: #fff;
/* float: left; REMOVED */
display: flex; /* Added */
align-items: center; /* Center vertically */
}
.page-container {
width: 992px;
margin: 0 auto;
}
.text1 {
/* float: left; REMOVED */
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 20px;
padding: 20px;
line-height: 25px;
}
.text2 {
/* clear: both;
float: left; REMOVED */
color: #fff;
text-shadow: 2px 2px 4px #000000;
font-size: 60px;
line-height: 65px;
}
/*mobile*/
#media only screen and (max-width: 1200px) {
.box {
min-height: 475px;
height: calc(100vw / 1.714);
}
}
#media only screen and (max-width: 992px) {
.box {
height: 475px;
}
.text1 {
font-size: 16px;
margin: 0 20px;
}
.text2 {
font-size: 40px;
margin: 0 20px;
}
}
<div class="box">
<div class="page-container">
<div class="text1">Hello World</div>
<div class="text2">How are you?</div>
</div>
</div>
Ok I solved this by displaying the box as a table and the box-container as a table-cell and using vertical-align:middle. Answer here:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Center Text</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Vertically Center Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.box
{
width: 100%;
height: 700px;
background-color: #1F3AC5;
color: #fff;
float: left;
display: table;
}
.box-container
{
display: table-cell;
vertical-align: middle;
}
.page-container
{
width: 992px;
margin: 0 auto;
}
.text1
{
position: relative;
float: left;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 20px;
padding: 20px;
line-height: 25px;
}
.text2
{
clear: both;
float: left;
color: #fff;
text-shadow: 2px 2px 4px #000000;
font-size: 60px;
line-height: 65px;
}
/*mobile*/
#media only screen and (max-width: 1200px)
{
.box
{
min-height: 475px;
height: calc(100vw / 1.714);
}
}
#media only screen and (max-width: 992px)
{
.box
{
height: 475px;
}
.text1
{
font-size: 16px;
margin: 0 20px;
}
.text2
{
font-size: 40px;
margin: 0 20px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="box-container">
<div class="page-container">
<div class="text1">Hello World</div>
<div class="text2">How are you?</div>
</div>
</div>
</div>
</body>
</html>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
Basically I'm trying to write some responsive code but I can't get it to work. What am I doing wrong?
Here's the page code with the extraneous bits removed:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Zinuru Project | Tighe O'Connor</title>
<!-- Site Stylesheet(s) -->
<link rel="stylesheet" type="text/css" href="scripts/zinuru.css" >
<link rel="stylesheet" type="text/css" href="scripts/zinuru-media-queries.css">
<!-- JQuery Stylesheet(s) -->
<link href="scripts/lightbox.css" rel="stylesheet" type="text/css">
</head>
<body id="<%=(rsMainMenu.Fields.Item("menuClass").Value)%>">
<div id="pageWrapper">
<aside>
<!--#include file="includes/aside.asp" -->
</aside>
<article>
<header>
<!--#include file="includes/header.asp" -->
</header>
<nav>
<!--#include file="includes/navbar.asp" -->
</nav>
<figure class="banner_slider">
<%
While ((rpt_Images__numRows <> 0) AND (NOT rsImages.EOF))
%>
<img src="images/<%=(rsImages.Fields.Item("imageName").Value)%>" class="nailthumb-container">
<%
rpt_Images__index=rpt_Images__index+1
rpt_Images__numRows=rpt_Images__numRows-1
rsImages.MoveNext()
Wend
%>
</figure>
<div id="content"><%=(rsContent.Fields.Item("content").Value)%></div>
</article>
</div>
<!-- /#pageWrapper -->
<!-- JQuery Runtime -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- JQuery Plugins -->
<script src="scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="scripts/lightbox-2.6.min.js" type="text/javascript"></script>
<script src="scripts/cycle.js" type="text/javascript"></script>
<!-- Local Scripts -->
<script type="text/javascript" src="scripts/localscripts.js"></script>
</body>
</html>
Here's the main site stylesheet:
/* CSS crunched with Crunch - http://crunchapp.net/ */
#import "/scripts/html5reset-1.6.1.css";
#import "/scripts/muli.css";
#import "/scripts/painted.css";
/**************************************************************************************
GENERAL STYLING
**************************************************************************************/
body {
background-color: #161616;
font-family: 'MuliRegular';
color: #616163;
font-size: 1em;
}
#pageWrapper {
position: relative;
top: 35px;
width: 836px;
margin: auto;
}
a {
outline: 0;
outline: none;
}
#home .home,
#artist .artist,
#installations .installations,
#paintings .paintings,
#reviews .reviews,
#teaching .teaching {
color: #ffffff;
}
/**************************************************************************************
HEADER
**************************************************************************************/
header {
height: 35px;
}
header #logo {
text-align: right;
}
header #logo #zinuru {
display: none;
}
header #logo #tighe {
font-family: 'MuliLight';
font-variant: small-caps;
font-size: 1.6em;
color: #ffffff;
}
/**************************************************************************************
NAVIGATION BAR
**************************************************************************************/
nav {
width: 706px;
height: 40px;
text-align: center;
}
nav dl {
padding: 0;
margin: 0;
display: inline-block;
position: relative;
text-align: left;
}
nav dl a {
display: block;
white-space: nowrap;
text-decoration: none;
color: #616163;
}
nav dl {
*display: inline;
}
nav dt {
height: 35px;
line-height: 35px;
}
nav dt a:hover {
color: #ffffff;
}
nav dd {
position: absolute;
left: 0;
margin: 0;
display: none;
background: #161616;
box-shadow: 1px 1px 2px #949494;
min-width: 190px;
padding: 0 3px;
z-index: 1000;
}
nav dd a {
color: #949494;
line-height: 25px;
}
nav dl.right dd {
text-align: right;
left: auto;
right: 0;
}
nav dl:hover dd {
display: block;
}
nav dl dd a:hover {
color: #ffffff;
}
nav .menuDivider {
margin: 0 5px;
color: #FFF;
}
/**************************************************************************************
ASIDE
**************************************************************************************/
aside {
width: 130px;
float: left;
}
aside #zinuru {
position: fixed;
margin: 240px 0 0 -195px;
width: 500px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
font-family: 'painted';
font-size: 5.5em;
color: #ffffff;
}
/**************************************************************************************
ARTICLE
**************************************************************************************/
article {
margin-left: 130px;
width: 706px;
/**************************************************************************************
PAINTINGS
**************************************************************************************/
}
article p {
margin-bottom: 10px;
line-height: 120%;
text-align: justify;
}
article h1 {
font-family: 'painted';
font-size: xx-large;
color: #ffffff;
margin: 20px 0 10px;
}
article figure {
border: #FFF thin solid;
}
article #content {
margin-top: 15px;
}
article table.paintings {
width: 706px;
}
article table.paintings tr {
text-align: center;
}
article table.paintings td {
padding-bottom: 6px;
}
article .paintingsThumbs {
width: 140px;
height: 140px;
}
/**************************************************************************************
THUMBNAIL CONTAINER
**************************************************************************************/
.nailthumb-container {
width: 706px;
height: 211.8px;
}
and this is my starting point media query stylesheet:
/* CSS crunched with Crunch - http://crunchapp.net/ */
/**************************************************************************************
SCREEN 320px
**************************************************************************************/
#media only screen and (max-device-width: 320px) {
#pageWrapper {
top: 0;
width: 300px;
margin: auto;
}
header {
height: 60px;
}
header #logo #zinuru {
display: block;
line-height: 5px;
}
header #logo #tighe {
font-size: 1em;
}
nav {
display: none;
}
aside {
display: none;
}
}
Hope you can see where I've gone wrong and what I need to change.
Many thanks in advance.
change:
#media only screen and (max-device-width: 480px) { ... }
to:
#media only screen and (max-width: 480px) { ... }
that way your site will respond on a mobile device and on the desktop.
By using max-device-width those rules will only kick in if the physical device's screen width is less than X px not if you adjust your browser size. I changed the number to 480px because that's the standard width of an iphone screen. 320px is too small.
Also use:
<meta name="viewport" content="width=device-width, initial-scale=1">
the initial-scale set's the virtual scale created by mobile devices to 100%, so that your site is viewed properly.
I need help in extending my div to the bottom of the page when there is not enough content to do so, when I add a height of 100% to the content and container nothing changes and when I add it to the body everything messes up. I am trying to give as much information as possible and so have provided the CSS and HTML below.
CSS:
(all of it, a lot of it is probably unnecessary in regards to this problem sorry)
body {
background-color: #111014;
background-image: url("images/bg.png");
background-repeat: repeat-x;
color: #dad8df;
font-family: tahoma;
overflow-y: scroll;
}
#container {
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
img{
border-style: none;
}
#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/bannerbg.png");
}
#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}
#content {
background-image: url("images/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 850px;
padding-left:80px;
padding-bottom: 20px;
margin-bottom: -8px;
padding-right: 50px;
overflow: hidden;
}
#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}
#slideshow {
height: 285px;
width: 840px;
margin-left: auto;
margin-right: auto;
background-color: #2e2c35;
float: left;
margin-bottom: 20px;
}
#slideleft {
height: 38px;
width: 23px;
background-image: url("images/slideleft.png");
float: left;
margin-left: -60px;
margin-top: 104px;
}
#slideright {
height: 38px;
width: 23px;
background-image: url("images/slideright.png");
float: right;
margin-right: -50px;
margin-top: 104px;
}
#emailform {
color: #dad8df;
font-family: tahoma;
overflow: hidden;
}
.inputs {
float: right;
width: 200px;
font: .9em tahoma;
}
#largemessage {
float: right;
clear: both;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}
#submit {
margin-top: 20px;
clear: both;
float: right;
}
hr {
border-width: 3px 0 0 0;
border-style: dotted;
}
.contacterror {
margin-right: 180px;
height: 20px;
width: 300px;
color: red;
float: right;
padding-left: 20px;
}
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" xml:lang="en" lang="en">
<head>
<title>About :: Lesley Robb Fine Art and Design</title>
<link rel="icon" type="image/png" href="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="design.css" type="text/css"/>
<script src="" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<img src="images/nav_home.png" alt="Home" /><img src="images/nav_portfolio.png" alt="Portfolio" /><img src="images/nav_about.png" alt="About" /><img src="images/nav_contact.png" alt="Contact" />
</div>
<div id="content">
<div id="title">
About
</div>
You can edit this section after you Log In to the Control Panel. :)</div>
</div>
</body>
</html>
The Page As it Currently Is
An image of it for future reference once I have fixed the problem
Thanks in advance for your time,
Callum
Try using a technique called Faux Columns.
Usually, if you add
body, html{
height:100%;
}
the container div will inherit from it.
Try setting the height on your #container div to auto.
#container {
height:auto;
That should do it!
As the doc said:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
If adding html,body { height:100%; } mess up, it's certainly because browsers set default margin/padding for these elements.
The simpler solution for your problem is to set for #container min-height the viewport height and set it a background which will fake #content reaches the bottom. Faux columns as Nathaniel said.
So my CSS layout was all fine until I wanted to add some into the content area of my web page.
What I'm trying to add into the content section is a wrapper box which contains a graph on the left and a bunch of little info boxes on the right, and potentially an info area underneath those two with 100% width of the content box.
But as soon as I add that in, it pushes my User Info div down below Content. =/ So I guess what's asking is how to create containers of divs within my content section that won't affect things like my sidebar?
Here's my code:
<div id="wrapper">
<div id="header"> </div><!-- #header-->
<div id="nav"> </div>
<div id="middle">
<div id="container">
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div></div>
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
User info
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
And the css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
margin-left: -100%;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
You didn't close a div and your CSS had errors as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
Nav item 1
Nav item 2
Nav item 3
Nav item 4
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
a {
color: white;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 100px;
background: #999999;
text-align: center;
font-size: 200%;
}
#nav {
height: 25px;
background: #555555;
text-align: center;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
}
/* Progress bar
----------------------------------------------------------------------------*/
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* The width and height of your image */
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #3D352A url(/path/to/your-image.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}