CSS - What the hell am I missing?

I have stuck on this and I know it is something so simple I will kick myself in the booty.

If you look at this site.

You will see I am trying to get images to the right side of the banner, and cannot figure out how to move them up and verticle.

http://wolphewebdesign.com/Clients/Sam/

Index.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure Infrared Saunas
</title>

<link href="style.css" rel="stylesheet" type="text/css" />


</head>




<body>

<div id="body">
<div id="wrapper">
<div id="header"></div><!--Closes header-->
<div id="navbar"><a href="index.html">Home</a>    |    
<a href="infrared-saunas.html">Our Saunas</a>    |
<a href="about-us.html">About Us</a>    |
<a href="why-infrared.html">Why Infrared</a>    |    
<a href="why-pure-saunas.html">Why Pure Saunas</a>    |   
<a href="health-benefits.html">Health Benefits</a>    |
<a href="testomonials.html">Testimonials</a>   |
<a href="contact-us.html">Contact Us</a>
</div><!--Closes header2-->


<div id="center">
<div id="topContent">
<div id="topLeft"></div><!--Closes topLeft-->
<div id="topRight1"></div><!--Closes topRight1-->
<div id="topRight2"></div><!--Closes topRight2-->
</div><!--Closes topContent-->
</div><!--Closes center-->




<div id="midSection">
<div id="blockMiddle">
<div id="midLeft1"></div><!--Closes midLeft1-->
<div id="midLeft2"></div><!--Closes midLeft2-->
<div id="midMain"></div><!--Closes midMain-->




	
</div><!--Closes blockMiddle-->
</div><!--Closes midSection-->


</div> <!--Closes wrapper-->
</div><!--Closes body-->


</body>
</html>

css file

@charset "utf-8";
/* CSS Document */

* {
	margin:0px;
	padding:0px;}
	
#wrapper {
	height: 1200px;
	width: 1000px;
	background-color: #fcefcf;
	margin-right: auto;
	margin-left: auto;
}

#body {
	b
	background-repeat: repeat;
	left: auto;
	background-color: fcefcf;
}
#header {
	background-image: url(images/header.jpg);
	height: 150px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}


#navbar {
	background-image: url(images/navbarbg.jpg);
	height: 47px;
	width: 940px;
	margin-left: 45px;
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
	line-height: 42px;
	text-align: center;
	font-size: 16px;
	}

#left {
	width:160px;
	float:left;
	margin-top: 15px;
	margin-left: 5px;
	}
	
#right {
	width:208px;
	float:right;
	margin-top: 0px;
	margin-right: 5px;
}

#center {
	margin-left: 0px;
	margin-top: 20px;
	}
	
#footer{
	position:absolute;
	margin-top: 1000px;
	}
	
a 
{
	color				: #ffffff; 
	text-decoration		: none
}

a: hover 
{
	color				: #FFF;
	text-decoration		: underline
}

a :active 
{
	color				: #CCCCCC; 
	text-decoration		: none
}

#topContent {
	width:1000px;
	height:324px;
}

#topLeft {
	background-image:url(images/anim-mid.gif);
	width:707px;
	height:324px;
	margin-left: 35px;
	}
	


#topRight1 {
	background-image: url(images/box1.jpg);
	height:158px;
	width:208px;
	float: right;
	margin-right: 15px;
	}

#topRight2 {
	background-image:url(images/box2.jpg);
	height:158px;
	width:208px;
	float: right;
	}



#bottom {
	background-image: url(images/skin_30.gif);
	background-repeat: no-repeat;
	height: 72px;
	width: 1000px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFF;
	text-indent: 170px;
	line-height : 7.5;
	
}

Any help you can give I would appreciate. I know its the simplest thing I am just missing it somewhere.

I sure appreciate it… This dang thing has had me stumped.

Not to mention I am just learning to go tableless, so I am giving it my all and that one just got to me.

I seem to have gotten it fixed, but I probably did it “not the way it should be”

http://wolphewebdesign.com/Clients/Sam/

float: left on your #topLeft.

If you float your div (a block level element) you take it out of the flow…Google document flow, you will find something that will more clearly explain document flow and element displays.

Nice color scheme BTW.

Well, definitely brush up on your doc. flow for tableless layout.

You also have a few of extra divs in there.
You don’t actually need your #center (you can put a top margin on the divs inside it) or your #topContent. I try and keep my CSS as simple as I can, it can get really confusing anyways! It just takes getting used to though - it’s extremely powerful and well worth some of the frustrations!
There’re some smart and experienced people here, I believe you’ve come to the right place.

Merry x-mas

A few notes on your CSS:

  • You can take the #body out. This div is doing nothing at all.
  • You restrict yourself by giving the wrapper a fixed height. A more appropriate way would be to use min-height: 100%. Maybe have a look at Ray’s Example
  • Since your header is inside of the wrapper you don’t really need to set the side margins for the header to auto.
  • The way you want to position your footer (margin-top: 1000px) is not the right one. You will be coming away with it if you page have just a few lines of content, but you’re restricted when the content is growing over time. You find a solution for this in the same article mentioned above
  • The way you try to float and position certain elements is not the right way. For example in #topContent you use negative margins and side margins for the children (#topLeft and #topRight) and than you use the top property on top of that. You would be better of to position the parent (#topContent) instead, in wich case you you won’t need any of those propertiies.