I have following HTML layout
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:10px 0px 0px 0px;
font-size: 11px;
font-family: Arial,Tahoma, sans-serif;
background: #fff;
color: #444;
}
h1 {
font-size:1.5em;
font-weight: bold;
}
#container {
width: 920px;
margin: 0 auto;
background-color: red
}
#header {
border: 2px solid #ccc;
height: 80px;
}
#content{
display: block;
width: 100%
}
#left {
clear: left;
float: left;
width: 660px;
border: 2px solid #ccc;
margin:0 0 10px 0;
padding:20px;
}
#right {
position: relative;
margin: 0 5px 0 5px;
padding: 5px 0px 0px 0px;
float: right;
width: 200px;
border: 2px solid #ccc;
}
#footer {
clear: both;
border: 2px solid #ccc;
padding: 10px 0 20px 0;
margin: 20px 0 0 0;
font-size: .9em;
color: #9b9b9b;
width: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
My problem is #container doesn’t hold the #left & #right contents, it only holds #header
Please refer attached imaged to see what my intended layout is.
You can add an empty element that has 'clear:both' at the end of the container:
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
<div style="clear:both"> </div>
</div>
</div>
I was able to achieve the intended result by using overflow: hidden; property
#container {
width: 920px;
margin: 0 auto;
background-color: red;
overflow: hidden;
}
Use a clearfix solution i.e.
common un-obtrusive clearfix solution
Related
Below print screen from google chrome html/css view.
One element under another, margin: 10px;, so they should be 20px from each other.
But they aren't. They are 10px apart, like the margins are connected.
body {
margin: 0;
background-image: url("2.png");
background-repeat: repeat-x;
font-family: 'Verdana';
font-size: 17px;
}
#logo {
background-image: url("logo.png");
width: 527px;
height: 58px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
}
.hidden {
display: none;
}
.nav {
background-color: #55585d;
height: auto;
margin-top: 10px;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
}
.nav > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav > ul li {
display: inline-block;
padding: 5px;
margin-right: 30px;
font-weight: 700;
}
/* 1195px width */
#center {
width: 1195px;
margin-left: auto;
margin-right: auto;
}
#container {
width: 864px;
min-height: 500px;
margin-left: 16px;
float: left;
}
.post {
width: 392px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
margin: 10px;
float: left;
}
#aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Devloger</title>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"></div>
<h1 class="hidden">Devloger</h1>
<nav>
<div class="nav">
<ul>
<li>
Strona Główna
</li>
<li>
Kategorie
</li>
<li>
Spis Treści
</li>
<li>
Współpraca
</li>
<li>
Kontakt
</li>
</ul>
</div>
</nav>
</header>
<div id="center">
<main>
<div id="container">
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="clear" style="clear: both;"></div>
</div>
</main>
<aside>
<div id="aside">
<div class="abox1">
</div>
<div class="abox1">
</div>
<div class="abox1">
</div>
</div>
</aside>
</div>
<div class="clear" style="clear: both;"></div>
</body>
</html>
There are cases (you can read about it here) where margins between elements are collapsed (overlapped, one on top of the other), and this is an intended behaviour, so it's not an error.
This is one of these cases and your current issue:
Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).
First you have some .post blocks with that margins, but these margins are working well because that blocks are floated. If you remove float: left from .post class you will see that these blocks margins are collapsed as well.
Knowing that margin collapsing exists, you can take it into account when designing layouts:
Page flow goes from left to right, top to bottom. So instead of define a margin-top and margin-bottom, define only a margin-bottom.
aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 0 10px 20px 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<aside>
<div class="abox1"></div>
<div class="abox1"></div>
<div class="abox1"></div>
</aside>
I'm working on a webpage and decided to tables in CSS to create my navigation bar; all is fine until I go to the cell with email address. The cell sort of skips a column. My webpage code is below, please help.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="template.css">
<script type="text/javascript" src="action.js"></script>
<title>Danny Wong: Portfolio</title>
</head>
<body onload="cycleImage('latestImage');">
<div id="header">
<div id="navTableContainer">
<div class="navTableRow">
<div class="navContent">
<p class="paraLogo">Danny Wong Art</p>
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Architectural Visualisation
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Envirnoment
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Design
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Character
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Digital Painting
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Development
</div>
</div>
<div class="navTableRow">
<div class="navContent">
Resume
</div>
</div>
<div class="navTableRow">
<div class="navContent">
<a href="http://dintheart.tumblr.com/">Blog<a/>
</div>
</div>
<div class="navTableRow">
<div class="navContent">
test219#gmail.com
</div>
</div>
</div>
</div>
<div id="main">
<img id="latestImage" src="" alt="image cycler" width="1000" height="600">
</div>
<div id="footer">
© 2014 Danny Wong
</div>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Freckle+Face);
body {
background-color: #000000;
color: #FFFFFF;
}
#header {
float: left;
background-color: tranparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: solid;
}
p.paraLogo {
font-family: "freckle face", serif;
font-size: 36px;
font-style: bold;
}
#navTableContainer {
display: table;
background-color: tranparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: dotted;
}
#navTableContainer a:hover {
color: red;
}
div.navTableRow {
display: table-row;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
div.navContent {
display: table-cell;
background-color: transparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid;
border-width: 2px;
text-align: center;
vertical-align: middle;
}
#main {
background-color: transparent;
width: 1000px;
height: 600px;
margin: -1% auto 0 auto;
padding: 0 0 0 0;
border-width: 0;
}
#footer {
background-color: transparent;
width: 200px;
margin: 0 auto 0 auto;
border-width: 0;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
Its really getting on my nerves, I know there are other better way and will probably use them, but I really want to find out why this is happening and it could be fixed - for future reference.
Here's how I'd do it:
HTML
<div id="header">
<ul>
<li class="paraLogo">Danny Wong Art</li>
<li>Architectural Visualisation</li>
<li>Envirnoment</li>
<li>Design
</li>
<li>Character
</li>
<li>Digital Painting</li>
<li>Development</li>
<li>Resume</li>
<li>Blog
</li>
<li> test219zgmail.com
</li>
</ul>
</div>
<div id="main">
<img id="latestImage" src="" alt="image cycler" width="1000" height="600" />
</div>
<div id="footer">© 2014 Danny Wong</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Freckle+Face);
body {
background-color: #000000;
color: #FFFFFF;
}
#header {
float: left;
background-color: tranparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: solid;
}
#header li.paraLogo {
font-family:"freckle face", serif;
font-size: 36px;
font-style: bold;
padding: 1em 0;
}
#header ul {
background-color: tranparent;
list-style:none;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-width: 2px;
border: dotted;
}
#header ul a:hover {
color: red;
}
#header li {
background-color: transparent;
width: auto;
height: auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid;
border-width: 2px;
text-align: center;
vertical-align: middle;
}
#main {
background-color: transparent;
width: 1000px;
height: 600px;
margin: -1% auto 0 auto;
padding: 0 0 0 0;
border-width: 0;
}
#footer {
background-color: transparent;
width: 200px;
margin: 0 auto 0 auto;
border-width: 0;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
Example: http://jsfiddle.net/ht5zH/2/
I know my answer will not be a big help for you, and maybe I don't understand all your needs, but I highly reccommend you to design your menu another way than with display: table;. An UL list will be easier for the HTML and CSS code.
There are two issues that I have;
1) I'd like the images in the header to stay within my 990px header during browser window resize.
2) How do I align (middle) images withtin header?
This is what I get after resize
Orange image goes under black one.
While they suppose to stay like this (within 990px of course)
Here is the code:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 930px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
margin-left: 224px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
</style>
</head>
<body>
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" border="0" alt=""></div>
<div class="right"><img src="imgn/banners/banner1.gif" border="0" alt=""></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</body>
HTML:
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" alt="" border="0"></div>
<div class="right"><img src="imgn/banners/banner1.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
CSS:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 933px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
float:right; margin-left:0px; width:748px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
Use the CSS background-image property instead of using an image. This way you can set the width of the container div as a percentage of the width of the outer container div based on the new size of the window after resize.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body { background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px; padding: 0; margin: 0; }
h1 { padding: 0px; margin: 0px; }
#wrapper{width:990px; margin:0 auto;}
#container { margin:0px auto; border:0px solid #bbb; padding:10px; width: 990px; }
.white-box { width: 180px; margin: 0px; }
#main-header { border:1px solid #bbb; height:98px; padding:3px; background:#FFF; width: 990px; margin:0px auto; }
#main-content { margin-top:10px; padding-bottom:10px; }
#main-body { margin-left:10px; width:666px; height:150px; }
#main-footer { margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; }
.box { padding: 8px; border: 1px solid silver; -moz-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 5px; border-radius: 8px; background-color: #fff; }
.box1 { width: 200px; float: left; }
.box2 { float:right; margin-left:0px; width:748px; }
div.left { width: 200px; float: left; }
div.right { width: 730px; float: right; margin-right:3px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="main-header">
<div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" alt="" border="0"></div>
<div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</div>
</body>
</html>
As suggested by Pete in another thread: You need to increase the min-width of #main-header to around 950px
Hi guys I have a question that is why does the whole page of my website move slightly to the left (10 - 30 px or so) when I insert an image and goes back to normal when I remove it. Any help at all is appreciated.
Html code-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Random Text">
<meta name="keywords" content="Random words">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>X</title>
<link href="menusheet.css" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
<div id="wrapper">
<!-- Black Menu -->
<div id="menu_wrapper" class="black">
<div class="left"></div>
<ul id="menu">
</div>
</div>
<div id="content">
<div id="container">
<div id="adsense">
</div>
<div id="stepsbox">
</div>
</div>
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
</div>
<div id="footer">
<div id="footerleft">
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
</div>
<div id="footercenter">
© 2013 x.com
</div>
</div>
CSS -
body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}
#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}
#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}
#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}
#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}
#footer {
height: 60px;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}
#footerleft {
width: 300px;
height: 50px;
float: left;
}
#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
Can't seen your images... :D, But in your places I insert into css this code
img{
margin: 0px;
padding: 0px;
border: 0px;
}
This remove any spaces aruound the images tag... try it and look forward...
It, Would be grate if you insert a image link... :)
EASLY to understand
Talking about which image "logo" or
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
if Factory edge is the image then add one after
<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />
Also add this in style
#content{margin:0 auto; }
with other properties in content
I think this will do, if not please explain in detail.. :)
I have a flow layout with following two alignment issues
Refer Image 1: When I change the zoo, the title info overlaps the logo.
Refer Image 2: The green box should come as right side of the blue box; currently it is coming on bottom.
How can I correct it? The code is available in this fiddle . Posted here also.
I am sure it is a very basic alignment lesson; however I am not able to figure it out even after many hours? Can you please take a look at it and answer?
Image 1
Image 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Support Site </title>
<link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<img alt="logo" src="Images/Logo.bmp" />
</div>
<div id="titleInfo">
Admin XXXXXXXX Support Site
<div id="signOut">
<a id="logOnStatus" class="signOut" >
Logout</a>
</div>
</div>
<div class="clear">
</div>
</div>
<div id="centralContainer">
<div id="leftNavContainer">
<div id="subContainerForLeftNav">
<div id="adminDiv">
<div class="backgroundButton" id="adminButton">
<p class="buttonText">
The Admin</p>
</div>
</div>
<div class="clear">
</div>
<div id="vendorDiv">
<div class="menuTextHeading">
<a class="menuText">The Management</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="connectivityButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="vendorsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="monitoringDiv">
<div class="menuTextHeading">
<a class="menuText">Test</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="transactionsButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="logsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
</div>
</div>
<div id="mainContainer">
<div id="transactionContentHolder" class="transactionContentHolder">
A
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
text-align: center;
background: Yellow;
}
#wrapper
{
width: 100%;
height: auto;
text-align:left;
margin: 0 auto;
/*background: #FFBA31;*/
background: #FFBA31;
}
#container
{
width: 100%;
height: auto;
margin: 0 auto;
background: white;
}
#header
{
width: 100%;
height: 70px;
background: white;
padding: 0 0 10px 0;
border:1px solid Red;
}
#titleInfo
{
font:bold 18pt Arial;
color:#2377D1;
width:80%;
height:35px;
float:right;
margin:10px 0 0 10px;
border-bottom:3px solid #fcda55;
padding: 10px 0 0 0;
display:inline;
}
#signOut
{
font:bold 9pt Arial;
float:right;
border-bottom:none;
padding: 0px 10px 0 0;
margin: 0px 0px 30px 0;
display:inline;
}
#logo
{
width:15%;
height:60px;
float:left;
margin:0 0 0 20px;
display:inline;
padding: 10px 0 30px 0;
}
#centralContainer
{
width: 100%;
height:auto;
margin: 0 auto;
background: white;
}
#leftNavContainer
{
width: 20%;
height: 700px;
/*float: left;*/
margin: 0 0 0 10px;
display: inline;
background: white;
border:1px solid Blue;
}
#subContainerForLeftNav
{
width: 190px;
height: auto;
}
#mainContainer
{
width: 75%;
height: 700px;
float: left;
margin: 0 0 0 30px;
display: inline;
background:white;
border:1px solid Green;
}
.menuText
{
font:bold 13pt Arial;
line-height:15pt;
color:#00A6B5;
}
.menuTextHeading
{
height:20px;
border-bottom:3px solid #fcda55;
padding:10px 0 10px 0;
margin:0 0 10px 0;
}
.buttonAlign
{
height:auto;
width:auto;
float: right;
padding:0 0 0 0;
margin:0 0 0 0;
}
.backgroundButton
{
width:150px;
height:86px;
display: block;
margin: 0px 0px 5px 0px;
background-image:url('../Images/ButtonBackground.bmp');
}
.buttonText
{
font:bold 15pt Arial;
line-height:18pt;
color:#ffffff;
padding:40px 15px 0 15px;
margin:0 0 0 0;
text-align:center;
}
.clear
{
clear: both;
}
see fiddle for code and demo
fiddle: http://jsfiddle.net/L3And/3/
demo: http://jsfiddle.net/L3And/3/embedded/result/
Screen Shot:
body {
margin: 0px;
padding: 0px;
text-align: center;
background: Yellow;
}
#wrapper {
width: 100%;
height: auto;
text-align: left;
margin: 0 auto;
/*background: #FFBA31;*/
background: #FFBA31;
}
#container {
width: 100%;
height: auto;
margin: 0 auto;
background: white;
}
#header {
background: none repeat scroll 0 0 white;
border: 1px solid Red;
height: 70px;
margin-bottom: 20px;
padding: 0 0 10px;
width: 100%;
}
#titleInfo {
border-bottom: 3px solid #FCDA55;
color: #2377D1;
float: right;
font: bold 18pt Arial;
height: 35px;
margin: 10px 0 0 10px;
overflow: hidden;
padding: 10px 0 0;
width: 55%;
}
#signOut {
font: bold 9pt Arial;
float: right;
border-bottom: none;
padding: 0px 10px 0 0;
margin: 0px 0px 30px 0;
display: inline;
}
#logo {
border: 1px solid orange;
float: left;
height: 32px;
margin: 03px 0 0 20px;
padding: 10px 0 30px;
width: 15%;
}
#centralContainer {
width: 100%;
height: auto;
margin: 0 auto;
background: white;
}
/*Elements within centralContainer*/
#leftNavContainer {
background: none repeat scroll 0 0 #CCCCCC;
border: 1px solid Blue;
float: left;
height: 700px;
margin: 0 0 0 10px;
width: 20%;
}
#subContainerForLeftNav {
width: 190px;
height: auto;
/*border:1px solid green;*/
}
#mainContainer {
background: none repeat scroll 0 0 white;
border: 1px solid Green;
height: 700px;
margin: 0 0 0 219px;
width: 76%;
}
.menuText {
font: bold 13pt Arial;
line-height: 15pt;
color: #00A6B5;
}
.menuTextHeading {
height: 20px;
border-bottom: 3px solid #fcda55;
padding: 10px 0 10px 0;
margin: 0 0 10px 0;
}
.buttonAlign {
height: auto;
width: auto;
float: right;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.backgroundButton {
width: 150px;
height: 86px;
display: block;
margin: 0px 0px 5px 0px;
background-image: url('../Images/ButtonBackground.bmp');
}
.buttonText {
font: bold 15pt Arial;
line-height: 18pt;
color: #ffffff;
padding: 40px 15px 0 15px;
margin: 0 0 0 0;
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Support Site</title>
<link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
<img alt="logo" src="Images/Logo.bmp" />
</div>
<div id="titleInfo">
Admin XXXXXXXX Support Site
<div id="signOut">
<a id="logOnStatus" class="signOut">
Logout</a>
</div>
</div>
<div class="clear">
</div>
</div>
<div id="centralContainer">
<div id="leftNavContainer">
<div id="subContainerForLeftNav">
<div id="adminDiv">
<div class="backgroundButton" id="adminButton">
<p class="buttonText">
The Admin</p>
</div>
</div>
<div class="clear">
</div>
<div id="vendorDiv">
<div class="menuTextHeading">
<a class="menuText">The Management</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="connectivityButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="vendorsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="monitoringDiv">
<div class="menuTextHeading">
<a class="menuText">Test</a>
</div>
<div class="buttonAlign">
<div class="backgroundButton" id="transactionsButton">
<p class="buttonText">
Test</p>
</div>
<div class="backgroundButton" id="logsButton">
<p class="buttonText">
Test</p>
</div>
</div>
</div>
</div>
</div>
<div id="mainContainer">
<div id="transactionContentHolder" class="transactionContentHolder">
A
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</body>
</html>
this might help you fiddle