I know this question has probably been asked before and I have tried several different ways of doing this, but I can not seem to get my inner DIV to expand to the full height of the viewport.
Here is my CSS:
html, body {margin: 0 auto; padding: 0; height: auto !important; min-height: 100%; height: 100%;}
p, h1 {font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;text-align:left;margin:1em 0}
/*******************************************************************************
Primary Container Structure
********************************************************************************/
#container {width: 100%; margin: 0px 0px; background-color: #fff; color: #333;}
#top {padding: .5em; background-color: #3b5998; color:White;}
#top h1 {padding: 0; margin: 0;}
#subcontainer {width: 90%; margin: 0px auto; line-height: 130%;}
#rightnav {height:100%; float: right; width: 244px; margin: 0; padding: 1em; max-width:244px;}
#content {height:100%; border-left: 1px solid gray; margin-right: 284px; border-right: 1px solid gray; padding: 1em;}
#leftnav p, #rightnav p {margin: 0 0 1em 0;}
#content h2 {margin: 0 0 .5em 0;}
#footer {clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}
Here is my HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="SHELL.aspx.cs" Inherits="SHELL" %>
<!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 runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="top">
<h1>NAME</h1>
</div>
<div id="subcontainer">
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</form>
</body>
</html>
You cannot have a middle container first calculate a footer height, then subtract it from it's 100% height parent container.
You're only options with your current markup are:
Use javascript (unncessary overhead)
Use tables (probably not a good idea)
Here is an option that I had to rearrange your code: Code Here
I made your height and footer work, but it will require you to use faux columns, a common technique for bottom sticking footers. See this for an example.
Simply, assign a left border image to repeat-y on the body, and a right border image to repeat-y, background right, on the subcontainer.
Related
I am aligning three images of equal size within a three-column layout.
This should lead to three images in a row.
It works as expected in IE11, Edge, FF, but Chrome does not what it should: It shows image 1+2 in the first column, image 3 is in the second column.
What is Chrome doing here? If I give the containing div a fixed height of e.g. 120px the three images are aligned as expected, side by side.
Snippet:
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px
}
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
imgs are inline elements by default, so you can give img {display: block;} and it will solve the issue:
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px;
}
img {
display: block;
}
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
That is very interesting, and I can't explain why it behaves that way (other than welcome to cross browser development), but as a quick fix I can tell you if you add the CSS img {display: block} it will work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px;
}
img {
display: block;
}
</style>
</head>
<body>
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<br>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
</body>
</html>
I have the following code. Right now the Title is aligned vertical top of the image. But the description is still wrapping (blocked) below the image and I want it to also be top aligned, right under the title next to the image like the title is, but again below the title.
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="../../../Images/thumbs/206.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
</p>
<p class="vtop">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
Try this
.vtop
{
display: inline-block;
vertical-align: top;
float: left;
margin-right: 20px;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
It sounds like you're after the CSS concept called the media object. It's designed specifically for the scenario you mention; a layout as follows:
+---------+ ~~~~~~~~~~ ~~~~~
| |
| | ~~~~~ ~~~~~ ~~~~
| | ~~~~~~~~~ ~~~~~~
+---------+
You can achieve this with a basic structure:
<div class="media">
<img src="http://placehold.it/50x50" alt="" class="media__img" />
<div class="media__body">
<p>Title of Something.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut.</p>
</div>
</div>
And just a few lines of CSS:
.media { display: block }
.media__img {
float: left;
margin-right: 24px
}
.media__body {
overflow: hidden;
display: block;
}
Here is a working fiddle to demonstrate.
You know there's always so many ways to solve problems. It seems to me it was a bit harder for me to understand what exactly was going on since you left out a lot of css info for the rest of the tags, but as far as I can see I feel like you're doing a lot of work to potentially do something quite simple. Hopefully that's not being to harsh I commend your efforts! I left your tags that aren't referenced in the css so it won't break you're code and you can paste it in easily.
All you need to do is float the image left .floatLeft and then create a div beside it with a margin-left to push the .content div containing the title/paragraph below out from the floated div since floats don't hold "real" space in the content flow of a web site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
.floatLeft {
float:left;
}
.content {
margin-left:210px;
}
</style>
</head>
<body>
<div class="col-lg-9 well">
<div class="row">
<div class="col-lg-12 well nopadding">
<img class="floatLeft" src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" />
<div class="content">
<p><span class="bold inline-block">Title of Something</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec.
Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur
lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl.
Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum
magna et ligula consectetur lobortis.</p>
</div>
</div>
</div>
</body>
</html>
I have serious troubles with my css layout.
This is my workingbase: http://jsfiddle.net/UeVm8/1/
<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0 auto;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
The site should always be 100% height at minimum with small distances to top and bottom.
There shouldn't be scrollbars, except the content is too big. Then it should fit to the content and the distances to top and bottom should stay.
But when you resize the window, the padding at the bottom disappears!?!
I already tried different settings and found a solution for Firefox: http://jsfiddle.net/UeVm8/7/
But this solution does not work in Chrome and IE.
I am totally annoyed by this nasty inconsistence in the CSS implementations.
Does anybody know how to solve this issue for all (modern) browsers?
Thanks.
PS: It's an stylesheet only for desktops.
I finally found the answer! :)
As mentioned I already found a solution for Firefox, but it was not working on Chrome.
After some fiddling I also had a solution for Chrome, which wasn't working on Firefox.
I think the issue is that there seems to be a bug in Google Chrome.
But I could combine both solutions by just overwriting settings just for chrome with some special selector.
The CSS solution: http://jsfiddle.net/UeVm8/8/
html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}
#container
{
position:relative;
margin: 0px auto 20px;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#container{
margin: 0px auto 0px;
}
html, body{
overflow:auto;
}
}
#header
{
background:#ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#content
{
padding: 20px;
padding-bottom:50px;
color:grey;
}
#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}
I tested it on Firefox, Chrome, IE, Opera and Maxton and it worked.
Nevertheless CSS is a crazy chick.
I've been searching for an answer on this, and tried multiple methods of fixing it to no avail. I'm teaching myself CSS while re-building a site, and have a small problem.
I have a container within a parent container - the "sub-container" (for lack of a better term) has it's own header, a photo to the left, and copy to the right. The copy should be top-aligned to the photo, and equally spaced between the right edge of the photo and the right edge of the background image in the sub-container. What I'm getting is the photo in the proper place, with the copy butted up against the bottom right corner of the photo.
I'm fairly certain the issue is a mix between lack of knowledge and a mis-understanding of what is causing what... so any help with this is greatly appreciated.
Here's my CSS:
#wrapper {
background-image:url("images/About/Copy-Block.png");
background-repeat:no-repeat;
width: 745px;
height: 339px;
margin: 0 auto;
margin-top: 30px;
}
#wrapper head {
display:block;
padding-top: 15px;
padding-bottom: 2px;
}
#wrapper photo {
float: left;
}
.wrapcopy {
padding-left: 90px;
font-size: 13px;
color: #FFF;
}
and here is my html:
<div id="wrapper">
<div id="wrapper head" align="center">
<img src="images/About/About-Us-Subhead.png" width="748" height="116" />
</div>
<div class="wrapcopy">
<img src="images/About/image.png" width="257" height="194" class="wrapper photo"/>
<i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</i>
</div>
</div>
You wrote "photo" instead of "img" in your CSS, edit it like this and it will work!
#wrapper img{
float: left;
}
However, you have 2 images in your example and this will float both of them. You can solve that by giving for example an ID/class to those images.
First off, you aren't referencing your classes properly: "#wrapper photo" should be "#wrapper .photo". Also, id's can't have spaces in them ("#wrapper head").
There are a few ways you can add spacing you desire. The most straight forward way would be to add padding directly to the image:
#wrapper .photo { float: left; padding-right: 10px }
I would also like to point out that the markup you are using is very poor. Headlines should go in h1-h6 tags (images are still allowed in these tags!), paragraphs of text should be in p tags. Section or article tags might be an appropriate replacement for your wrapper div. It's not enough to know CSS, you also need to know the appropriate HTML markup to go with it.
A more efficient way of doing this would be like this:
section.foo {
background-image:url("images/About/Copy-Block.png");
background-repeat:no-repeat;
width: 745px;
height: 339px;
margin: 0 auto;
margin-top: 30px;
}
section.foo h1 {
padding-top: 15px;
padding-bottom: 2px;
text-align: center;
}
section.foo p {
padding-left: 90px;
font-size: 13px;
color: #FFF;
font-style: italic;
}
section.foo p img {
float: left;
padding-right: 10px;
}
And the HTML:
<section class="foo">
<h1><img src="images/About/About-Us-Subhead.png" width="748" height="116" /></h1>
<p><img src="images/About/image.png" width="257" height="194" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</section>
First of all, Never use any spaces naming an ID.
So change id="wrapper head" to id=id="wrapper_head"
Next, elements can be selected by their tags.
An Image is coded by <img tag so you can select it directly in CSS by img { } .
In your case, you want to select image inside #wrapper division, so select it by :
#wrapper img
{
/* Code Here... */
}
The problem of your code are the spaces in the id tags.
Try something like
<div id="wrapper_head" ....
instead of
<div id="wrapper head" ....
That should solve your problem!
I've got a basic site with header, content, footer. What I'm looking for is a way to style the footer so that, depending on screen resolution, if the content doesn't fill the page it sticks to the bottom, but if content overflows it pushes the footer down (have to scroll the browser to see the footer).
<div id="wrapper">
<div id="headwrapper">
<div id="header"></div>
<div id="menu">
<ul>
<li class="active">Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
<div id="content-container">
<div id="content">
<h2>
Page heading
</h2>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="aside">
<h3>
Aside heading
</h3>
<div class="box">
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
</div>
<div class="box">
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer content</p>
</div>
</div>
html, body {height:100%;}
#wrapper {
max-width:100%;
min-width:1000px;
min-height:100%;
margin:0 auto;
background-image:url(images/shadowborder.png);
background-repeat:repeat-y;
background-position:center;
}
#headwrapper {
position:relative;
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:#003a72;
background:url(images/bnr_rpt.jpg) repeat-x;
height:150px;
}
#header {
position:relative;
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background:url(images/KMIAFS_banner.jpg) center top no-repeat;
height:150px;
}
#menu {
clear:left;
float:left;
padding:0;
border-top:5px solid #f52620;
width:100%;
overflow:hidden;
height:70px;
}
#menu ul {
float:left;
margin:0;
padding:0;
list-style:none;
position:relative;
left:50%;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
font-size:16px;
font-family:Verdana, Geneva, sans-serif!important;
font-weight:bold;
}
#menu ul li a {
display:block;
float:left;
margin:0 2px 0 0;
padding:10px 20px 6px 20px;
background:#003a72;
text-decoration:none;
color:#FFF;
}
#menu ul li a:hover {
padding:15px 20px 6px 20px;
background-color:#999;
}
#menu ul li.active a, #menu ul li.active a:hover {
color:#CCC;
}
#content-container {
min-height:100%;
height:100%;
height:auto!important;
margin:0 auto -70px;
width:1000px;
}
#content {
clear:left;
float:left;
width:610px;
margin:0 0 0 30px;
display:inline;
background-color:transparent;
}
#content img {
border:solid 2px #CCC;
float:left;
margin:14px 10px 10px 0px;
}
#content h2 {
margin:0;
}
#aside {
float:right;
width:290px;
margin:0 30px 0 0px;
display:inline;
background-color:transparent;
}
#aside p {
color:#CCC;
}
#aside .box {
margin-bottom:20px;
padding:20px;
color:#fff;
background-color:#336699;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
#footer {
height:70px;
width:100%;
border-top:5px solid #f52620;
background:url(images/ftr_rpt.jpg) repeat-x;
text-align:center;
color:#FFF;
margin:0 auto;
clear:both;
}
#footer a {
color:#FFF;
text-decoration:none!important;
padding:-5px;
}
#footer a:hover {
color:#CCC;
}
And here's the site: http://www.erisdesigns.net/Stage/McCampbellInsurance/index.html
I use this version, and it works quite well.