CSS - mixing absolute and relative positioning?

I'm building a site from scratch for my wedding video business and I'm having a little problem with positioning. I'm afraid I'm below average when it comes to coding a site myself (I don't like the messy code the WYSIWYG editors make) and could really use some help.

I want the bottom part of the main text to have about 25px of space before the end of the page. Right now it is at the bottom and I don't think it looks very nice. I don't want the text to be blocked off at all, but just have it so that when I scroll all the way down, there's some background at the bottom instead of just the main section.

I tried mixing absolute and relative positioning to no avail (but it's possible that relative isn't what I want at all).

<html>
<head>
<title>What makes the difference</title>
<!-- i've taken out the reference to your CSS file and included the necessary CSS in the page -->
<style type="text/css">
body {
background: RGB(89,84,65) url('./banner_difference.jpg') no-repeat top left;
}
#content {
margin-top:200px;
margin-left:100px;
width: 770px;
}
a:link {
font-family: sans-serif;
font-size: x-large;
color: RGB(74,135,151);
text-decoration: none }
a:hover {
font-family: sans-serif;
font-size: x-large;
color: RGB(105,191,222);
text-decoration: none }
a:active {
font-family: sans-serif;
font-size: x-large;
color: RGB(105,191,222);
text-decoration: none }
a:visited {
font-family: sans-serif;
font-size: x-large;
color: RGB(105,191,222);
text-decoration: none }
.navigation, .main {
background:white;
border: 2px solid RGB(185,176,157);
}
.navigation {
margin-bottom:15px;
}
.main {
margin-bottom:25px;
}
h1 {
font-family: sans-serif }
.main {
padding: 0 20px;
}
</style>
</head>
<body>
<div id="content"><!--this is a new div-->
<div class="navigation">
<p align="center"><a href="./index.html">Main</a> ~ <a href="./demos.html">Demo Videos</a> ~ <a href="./difference.html">The Difference</a> ~ <a href="./pricing.html">Pricing</a> ~ <a href="./reviews.html">Reviews</a></p>
</div>
<div class="main">
<h1 align="center">Why should you choose Thomas Taylor Video?</h1>
<p>Special care is taken with every video to ensure that you get a video of the highest quality possible. Unlike other wedding videos, special attention is payed to the little details that can be the difference in a video that is watched after the wedding and soon forgotten or a video that is watched time and time again to remember that special day.</p>
<h2 align="center">Every video shot in High Definition</h2>
<p>Just like how it is difficult to plant a strong tree in hard soil, it is impossible to make a high quality video without having the best quality footage to start with. Every wedding is shot in a high definition format so when the final DVD is created, no detail is lost in the process. Each video is also shot at 24 frames per second (the same as Hollywood films) to give the footage a fluid and comfortable feel. The type of camera used to make each video is customizable so that the best footage can be taken in any situation.</p>
<h2 align="center">Color Correction</h2>
<p>Special attention is given to making the picture quality of every video the best that it possibly can be. Using advanced software, the colors of every single shot are maticulously tweaked to be certain that each frame of video stands out. Other wedding video companies are content to deliver the video straight from the camera without taking the extra time needed to make the picture really "pop." Take a look at a few of these before and after photos and judge for yourself whether the extra time and care is worth it.</p>
<p align="center"><img src="./images/TempleCC2.jpg"></p>
<p align="center"><img src="./images/TempleCC.jpg"></p>
</div>
</div><!--content-->
</body>
</html>

that should do it. check odd bits and bob in various browsers before you commit it (google 'ie box model' ) .

oh, and one thing i forgot to mention (although you may not care) - stuff like 'align = center' is technically 'not cool' in web design any more. it probably won't break anything, but if you want brownie points then put any style stuff in the CSS.

jSunbeam, thank you very much. The code you gave me works great except for one piece that I haven't been able to figure out. In the body section you added:

Code:

url('./images/banner_difference.jpg') no-repeat top left;

I can't get the banner to display now after losing the top_left_image div. (Also, note that I changed the address to a folder images as that is where the file is stored). I'm not familiar with the url command or how it works. I assume that it just splices in whatever that URL is?

You mentioned that align="center" is no longer the way things are done. Could you explain what the overall strategy for centering things is? Do you make a class called "center" or something?

You mentioned that align="center" is no longer the way things are done. Could you explain what the overall strategy for centering things is? Do you make a class called "center" or something?

Click to expand...

Basically the idea behind CSS is that all the style information is kept completely separate from the markup code. The ultimate goal is to be able to the change the style sheet without touching any of your html markup and get a completely new design. So, bearing this is mind, its not a good idea to hardcode in alignment.

You could create a class, but the easiest and cleanest way would be to mark up your headers (if they're going to be consistent across your site). So delete the 'align=center' from your html and then in your CSS:

Code:

h1, h3 { text-align: center; }

Much cleaner.

As for your images at the bottom, I'd drop the <p> tags, they're unnecessary markup. Add this to your CSS:

MacRumors attracts a broad audience
of both consumers and professionals interested in
the latest technologies and products. We also boast an active community focused on
purchasing decisions and technical aspects of the iPhone, iPod, iPad, and Mac platforms.