I'm trying to get a layout to look like this following:
http://i42.tinypic.com/2i8wyrk.png
I've managed to get the "content" div aligned fine with the header div, but I'm not sure how to put the nav div in there and keep it aligned properly. This is what I have so far:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style>
div#container {
position: relative;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 70%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
}
div#nav {
position: absolute;
background-color: #900;
border: 2px solid #488ed0;
width: 150px;
height: 200px;
float: left;
}
div#content {
border: 2px solid #488ed0;
background-color: #900;
width: 70%;
height: 900px;
margin: 0 auto;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
</style>
</head>
<body>
<div id = "container">
<div id="header">
<center><img src = "images/logo.png" /></center>
</div>
<br />
<div id="nav">
<center><br />
<a href='#'>Index</a><br />
<a href='#'>About</a><br />
<a href='#'>Contact</a>
</center>
</div>
<div id="content"></div>
</div>
</body>
</html>
How can I align the nav div as it is in the example mockup I made? I want to make sure the left side of 'nav' stays aligned with the header, and the right side of 'content' stays aligned with the right side of the header.
For nav I noticed that you are using position: absolute and a float: left;. While aligning might need a bit of tweaking the best solution I can think of is using float for both the nav and content. For example:
#header{
margin: 0 auto;
width: 800px;
height: 200px;
}
#container{
margin: 0 auto;
width: 800px;
height: auto;
}
#nav{
float: left;
width: 200px;
height: auto;
}
#content{
float: right;
width: 600px;
height: 500px;
}
.clear{
clear: both;
}
Of course adjust the widths, height and margins according to the spacing you would like.
<div id="header">This is my banner</div>
<div id="container">
<div id="nav">This is my navigation menu</div>
<div id="content">This is my content</div>
</div>
<div class="clear">
If you want to make sure that things stay aligned when adding a margin to the nav section use margin-right and if you want to add a margin to the content section use margin-left. Finally, if you need a space between the banner and the two section below it use margin-bottom inside the header CSS.
Here is a solution if you're looking for a liquid layout: http://jsfiddle.net/M78q4/1/
HTML
<div id="head">this</div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
div#container {
position: relative;
width: 75%;
margin: 0 auto;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 100%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div#nav {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
background-color: #900;
border: 2px solid #488ed0;
width: 24%;
height: 200px;
float: left;
margin-right: 2%;
}
div#content {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border: 2px solid #488ed0;
background-color: #900;
width: 74%;
height: 900px;
float: left;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
If you don't want it to be liquid just change the #container width to a fixed width like 800px. Adjust the margins as needed.
This should get the layout you're after: http://jsfiddle.net/WDvwP/
HTML
<div id="head"></div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
#head{
width:900px; height:100px;
background:#f00;
margin:10px auto;
}
#container{
width:900px; margin:0 auto;
}
#nav{
display:inline-block;
width:250px; height:300px;
background:#0f0;
}
#content{
display:inline-block;
width:600px; height:300px;
background:#00f;
margin:0 0 0 50px;
}
Related
Quick question regarding positioning an absolute div in a parent display: table-cell in IE.
I have created a jsfiddle of the layout that I am trying to create and it works in chrome and firefox but in IE it breaks the .list-container absolute height of the child (which is se to to fill all space from the top 118px down) when inside of a parent with display: table-cell .
Is there any IE styling rules that I am missing to help it render the absolute child? Is this something that is possible in IE?
jsFiddle
html, body{
height:100%;
margin:0;
padding:0px;
}
.table{
display : table;
width : 100%;
height : 100%;
}
.row{
display : table-row;
width : 100%;
height : 100%;
}
.table-cell{
height:100%;
width:50%;
border:1px solid #000;
display : table-cell;
position: relative;
}
.header{
position:relative;
top:0px;
height:112px;
margin:0px;
border:3px solid blue;
background: rgba(0,0,230, .2);
}
.list-container{
position:absolute;
top:118px;
left:0px;
bottom:0px;
right:0px;
margin:0px;
overflow:auto;
overflow-x:hidden;
border:3px solid #CCC;
background: rgba(0,0,0,.1);
}
<body>
<div class="table">
<div class="row">
<div class="table-cell">
<header class="header"></header>
<div class="list-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
I found that in IE a table-cell only accepts the height from the child elements. If you add a wrapper div.table that has a styleof 100% with and height around the header.header and div.list-container it will give thew parent div.table-cell aheight of 100% of the parent table.
here is a jsfiddle showing the changes:
jsFiddle
html,
body {
height: 100%;
margin: 0;
padding: 0px;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
height: 100%;
}
.table-cell {
height: 100%;
width: 50%;
border: 1px solid #000;
display: table-cell;
position: relative;
vertical-align: top;
}
.header {
position: relative;
top: 0px;
height: 112px;
margin: 0px;
border: 3px solid blue;
background: rgba(0, 0, 230, .2);
}
.list-container {
position: absolute;
top: 118px;
left: 0px;
bottom: 0px;
right: 0px;
margin: 0px;
overflow: auto;
overflow-x: hidden;
border: 3px solid #CCC;
background: rgba(0, 0, 0, .1);
}
<body>
<div class="table">
<div class="row">
<div class="table-cell">
<header class="header"></header>
<div class="list-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*#import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.
Check out this fiddle for an example:
http://jsfiddle.net/kLMtb/
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table
There are 2 ways I know of to achieve equal height columns.
1) CSS tables
FIDDLE
Markup:
<div id="header">
<p>This is the header.</p>
</div>
<div class="wpr">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
<div id="contentliquid">
<p>Some content</p>
</div>
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footer">
<p>This is the footer.</p>
</div>
CSS
#header {
height: 100px;
background: orange;
}
.wpr
{
display:table;
}
#leftcolumn
{
width: 200px;
background: aqua;
display:table-cell;
}
#rightcolumn
{
width: 200px;
background: pink;
display:table-cell;
}
#contentliquid {
background: yellow;
overflow:hidden;
display:table-cell;
}
#footer
{
clear:both;
background: green;
}
2) Faux columns
Requires a background image with repeat-y (Read the above article).
Something like this:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
I created the simple web page layout that includes : header, left, right and footer div blocks.
This is the html code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
This is the css style :
body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
The web page looks like this:
But when i try to add the left block like on the picture it looks uncorrect. I use this css code for that:
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
DEMO on jsFiddle - http://jsfiddle.net/khbTg/
How can I to put Left div block in the yellow area like on the picture? Thank you for any help.
You just want to float .right to the right. If you can change your markup to:
<div class="header">#header</div>
<div class="container">
<div class="right">
<div class="nav">#nav</div>
</div>
<div class="content">
<div class="article">#article</div>
<div class="article">#article</div>
<div class="article">#article</div>
</div>
</div>
<div class="footer">#footer</div>
You would then want to add the styles:
.container { clear: both; }
.content { width: 80%; }
.right {
width: 20%;
float: right;
}
.content, .right {
margin: 0;
padding: 0;
}
Fiddle: http://jsfiddle.net/YDNsA/1/. I added .container to help clear things, as you don't want to float around .header or .footer. Remember to avoid putting a margin, padding or border on .right or .content.
Would you not need to put:
.left {
float: right;
}
When you use a float, the floated element is removed from document flow and 'floated' - following elements then flow around the floated element. To use a right float the way you wish, the right-floated element .right needs to appear in the DOM before the left element.
Alternatively, float your .left element left, and float your .right element left also - then they will layout correctly.
Don't forget to clear the floats afterwards :)
As a side-alternative, you could set .left and .right to display: inline-block; and this would solve your problem without floats and clears. You do need to then either (a) set font-size to 0 for the parent element to avoid the whitespace issue, or (b) comment out the whitespace between .left and .right. Google it if interested.
I make a a demo file how can you make a simple page layout:
Enjoy it PAGE LAYOUT EXAMPLE
CSS:
header {
width: 400px;
border: 2px solid black;
text-align: center;
margin-bottom: 5px;
}
article {
width: 300px;
height: 400px;
border: 2px solid black;
margin-right: 5px;
float: left;
}
sidebar {
width: 90px;
height: 400px;
border: 2px solid yellow;
float: left;
}
footer {
width: 400px;
border: 2px solid black;
text-align: center;
margin-top: 5px;
clear: both;
float: left;
}
I need some help here. I been trying to get it right for hours and i can't find an efficient solution.
<div id="Header">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'
/>
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
Example of what im trying to do
i want to have a liquid header with an image aligned to the left and a title aligned to the center, but both of em have to align to the middle of the height, no mather if i increase img /div's height
Had to add few more divs but it works. http://jsfiddle.net/74Rnq/23/
HTML:
<div id="Header">
<div class="wrap">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
<div class="text">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
CSS:
#Header {
position: relative;
height: 200px;
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
overflow: auto;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
text-align: center;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#Header .wrap {
display: block;
position: absolute;
width: 100%;
top: 50%;
margin-top: -50px; /* Half of wrap div height */
}
#Header .wrap .text {
position: absolute;
top: 50%;
margin-top: -27.5px; /* Half of text div height */
width: 100%;
}
For modern browsers you can do it via display:table, table-row table cell:
Modify your html like this:
<div id="Header" class="table">
<div class="row">
<div class="cell">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
</div>
<div class="cell main">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
#Header {
background: #DBE6EC;
border-bottom: 1px solid #595959;
position:relative;
padding:15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.cell.main {
width:100%;
}
The updated fiddle is here. This solution won't work in ie7. There is a older workaround for vertical align middle, if you have to support ie7.
Make the container div display: table-cell and each child div display: table-cell. Then you can give the child divs vertical-align: middle and they will always be vertically centered.
HTML:
<div id="Header">
<div id="image">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' />
</div>
<div id="title">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
and CSS:
#Header {
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
display: table;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#title{
display: table-cell;
vertical-align: middle;
width: 100%;
}
#image{
display: table-cell;
vertical-align: middle;
}
Aaand here's the jsFiddle.
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%;
}