HTML - Text To Appear At Left Bottom Of The Page

Hello. I have text at the top right, "A Site for All Nations to Share their Knowledge!" and I need to move it to the left a bit so its not overlapping the sun image.

I appreciate You!

I am attempting to have a table cell that is outlined. No matter how much text ends up in that table cell, the top part should align to the top, and the bottom part should align to the bottom. The cell size/border needs to be consistent across the row (which is why I didn't just float some divs).

I have spent hours looking online, and have found various "solutions" that do not in fact seem to work.

Here is my 'sample' code. I know that the valign isn't working, I just put it in there so it makes sense "logically" what I am trying to do.

Thank you in advance for any help you can provide.

Code:

<table width="600">
	<tr>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

For some strange reason if I want to have an ad or image on the left of my text article usually i put a div code around whatever it is like..

Code:

<div style="DISPLAY: block; FLOAT: left; MARGIN: 0px 10px 0px 0px">

</div>

This works GREAT in firefox but then i was shocked when i went over to Internet explorer and tested my site there using the latest browser.. it doesnt acknowledge that code and so the ad or the image ends up being above my article instead of nicely on the left and the text wrapped around it on the right like you see in firefox

Any ideas how to get around this? Maybe a fix that works for ie. and firefox?

thank you guys and gals in advance

Hello all-
This is my first post on HTML forums, and I hope ya'll can help me out with this issue. I feel really dumb...and think that my problem is probably a simple one, but I can't figure it out.

I've got a left sidebar, coded to float left in CSS, and in dreamweaver it shows up appropriately. However, whenever I look on firefox or ie, the left shows up on the right. I've also got an orange background image that DOES show up in the correct spot. I'm wondering if my problem could be related to the fact I've got the image listed under main-content, not the left sidebar. I've moved that line in the CSS, but it didn't help.

Here is a link to my problem: http://www.durhamsafekids.org/main.html

Here is my CSS code:
Code:

body {
	font-size: 62.5%;
	background: url(images/top-bdr.jpg) repeat;
}

p, li {
	font: 1.2em/1.8em Sabon, sans-serif;
	margin-bottom: 10px;
}

h1 {
	font: 2.0em "Helvetica Neue", sans-serif;
	color: white;
	height: 0px;
}

h2 {
	font: 1.8em "Helvetica Neue", sans-serif;
	color: #99cc33;
	margin-bottom: 10px;
}

h4  {
	font :Georgia, "Times New Roman", Times, serif;
	color: #0078AA;
}

h3  {
	font :Georgia, "Times New Roman", Times, serif;
	color: #333399;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	background: white;
    width: 960px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
#main-content {
	background: url(/images/left-sidebar.gif) repeat-y white;
	padding-left: 230px;
	padding-top: 20px;
}
	
#header {
	background: #ffffff;
	text-align: center;
}

#menu {
	background: #ffffff;
}

#left-sidebar {
	width: 185px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
}

#footer {
	background: #99cc33;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #006699;
	font-size: 12px;
}

.footer a:link    {
  /* Applies to unvisited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #006699;
  } 
.footer a:visited {
  /* Applies to visited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #006699;
  } 
.footer a:hover   {
  /* Applies to links under the pointer in class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  color:            #006699;
  } 


/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(menu/three_1.gif);}
.preload2 {background: url(menu/three_1a.gif);}

#nav {padding-left:217px; margin:0; list-style:none; height:38px; background:#fff url(menu/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(menu/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(menu/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(menu/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(menu/three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:108px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(menu/arrow.gif) 100px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(menu/arrow_over.gif) 100px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:110px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(menu/arrow_over.gif) 110px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(menu/arrow.gif) 110px 6px no-repeat; color:#000; border-color:#bbd37e;}

And here is my HTML code:
Code:

<!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="en" lang="en">

<head>
	
    
    <meta http-equiv="Content-Type" content="text/html" />
	
	<title>Durham County Safe Kids</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
    


</head>

<body>

	<div id="page-wrap">
		<div id="inside">
			
			<div id="header"><!-- #BeginLibraryItem "/library/header.lbi" --><img src="images/Header2.jpg" alt="Durham County Safe Kids" name="headerimage" width="775" height="200" border="1" style="background-color: #CCCCCC">
<!-- #EndLibraryItem --></div>

          <div id="menu"><!-- #BeginLibraryItem "/library/menu.lbi" -->
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
	<li class="top"><a href="library/index.html" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="safety" class="top_link"><span class="down">Safety</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Vehicle Safety</a><ul>
						<li><a href="#nogo4">Car Seats</a></li>
						<li><a href="#nogo5">Spot the Tot</a></li>
						<li><a href="#nogo6">Hyperthermia</a></li>
                        <li><a href="#nogo7">Distracted Driving</a></li>
					</ul>
            </li>

			<li><a href="#nogo8">Poison Prevention</a></li>
			<li><a href="#nogo9">Wheeled Safety</a></li>
			<li><a href="#nogo10">Firearms Safety</a></li>
			<li><a href="#nogo11">Water Safety</a></li>
			<li><a href="#nogo12">Home Safety</a></li>
			<li><a href="#nogo13">Pedestrian Safety</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo54" id="events" class="top_link"><span>Events</span></a></li>
	<li class="top"><a href="#nogo55" id="links" class="top_link"><span>Links</span></a></li>
	<li class="top"><a href="#nogo56" id="photos" class="top_link"><span>Photos</span></a></li>
	<li class="top"><a href="#nogo57" id="about" class="top_link"><span>About Us</span></a></li>
</ul>
<!-- #EndLibraryItem --></div>

<div id="left-sidebar">This Text should be in the Orange Left Sidebar.</div>
			
			<div id="main-content"><img src="images/preventingunintentionalinjury.gif" alt="" width="529" height="127" align="right" /><br /><br />
				<h2>This website is currently under construction.  Please come back soon!</h2>
				
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
			
			<div style="clear: both;"></div><!-- #BeginLibraryItem "/Library/footer.lbi" -->

<div id="footer">
<table align="center" width="50%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <th scope="col"><span class="footer"><a href="index.html">Home</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Safety</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Messages</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Links</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Photos</a></span></th>
    <th scope="col"><span class="footer"><a href="#">About Us</a></span></th>
  </tr>
</table>
<br>
			<center><font size="+2" color="FFFFFF"><strong>Durham County Safe Kids</strong></font></center>
			</div><!-- #EndLibraryItem --></div>
		
		<div style="clear: both;"></div>
	
	</div>

</body>

</html>

As you can see from the linked screenshot, the text shows up on the right side of the page, not in the orange box.

http://www.durhamsafekids.org/dskscreen.jpg

Thanks all!

~Jeff

I am a novice when it comes to html and can't figure out why there is a gap at the top and bottom of my web page in Mozilla? In AOL browser it is ok.

http://www.nomoreheartdiseaseandstrokes.com

Thanks

http://wantedfraternity.webs.com/officerschat.html

At the very bottom of my page I've got a gap...and I cant seem to see whats causing it. I had this problem before on another page, but I was able to fix it. This one I just cant seem to.

Now the grey background is suppost to go all the way down, but its got a black spot stopping it now. Any help on what is causing it I'd be greatful. Thanks

hi i'm new to htm, infact new to making websites at all.

i spent ages writting an intoduction, but some one deleted it.

i have started writting my first HTML page :

http://normington.superfreehost.org/...age%204.1.html

so far it's just some embeded movies from youtube.

my first problem is that i want to align text to the left of the video and centered vertically.

my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad.

"<!-- Paste this code into the body section, not the head section of the page -->
<script type="text/javascript"><!--
ch_client = "b0redum";
ch_non_contextual = 0;
ch_keywords = "tech,free";
ch_linkStyle= "style3";
//--></script>
<script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript">
</script>
<div id="PaypopupStartCode" style="display:none">
</div>
<script language="JavaScript1.1">
if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;}
if (!paypopupScriptStart) {
document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E"));
paypopupScriptStart = true;
}
</script>
<noscript>
</noscript>"

what does this text do, and how do i move it?

any advice about my page would be apprichiated, items to add etc,
the next thing i want to do is make a comments page.
is this an easy thing?

thanks for your help,
Normington.

Hi, i have tables on my site at the top, middle, right,left etc... but I can't seem to get one to stick at the bottom of the page, it just stays underneath the other page info, i want it to go right to the bottom....

any ideas? thanks

Hey been looking around for an example on how to get an Iframe to load at the bottom of a page and not move, just a small Iframe, like 25px in height and 100% width, Ive got a page which scrolls news and I didnt want it to reload every time the user clicked on another page. I dont want it to be at the bottom of the content on the page, but on the bottom of the actual browser window if that makes sense

Any suggestions would be great thanks

I need help with this html page. I would like the disclaimer at the bottom of the page to not follow the body. Is that possible?

Take a look at this html and let me know if it is possible to recode it to show the disclaimer across the entire width of the page bottom as in this url : http://www.stocktraderspress.com/mem..._01112012.html


Here is the html code for the new page I am trying to edit:

<html>
<head>
<title>Stock Traders Press :: 2011 Performance</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

.style3 {
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style4 {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

.style11 {font-size: 10px}

.style15 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
.numbersbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: center;
}
.datebody {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: right;
}
.tickerbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: left;
}
.style17 {font-size: 14px; font-family: Arial, Helvetica, sans-serif;}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" marginwidth="0" marginheight="0">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center" valign="middle" bgcolor="#FFFFFF">
<td width="20%" height="19">*</td>
<td width="20%" height="19">*</td>
<td width="20%" height="19">*</td>
<td width="20%" height="19">*</td>
<td width="20%" height="19">*</td>
</tr>
<tr align="center" valign="middle" bgcolor="#FFFFFF">
<td colspan="5">
<table width="89%" border="1" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td valign="middle" bgcolor="#FFFFFF">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td colspan="5"><img src="/stp_logo.gif" width="363"
height="42"></td>
<td>*</td>
<td><span class="style3">2011 Performance</span></td>
</tr>
<tr>
<td colspan="2"><a href="/members/welcome.php">Go Back
</a></td>
<td colspan="5"><span
class="style4">************************** </span></td>
</tr>
<tr>
<td colspan="7"><span class="style4">These are the recommendations our Firm made in 2011
</span></td>
</tr>
<tr>
<td colspan="7"><span class="style4">By purchasing an
equal amount of every stock, you would have had an average
gain of 9.41%</span> </td>
</tr>
<tr>
<td width="87">*</td>
<td width="115">*</td>
<td width="80">*</td>
<td width="79">*</td>
<td width="197">*</td>
<td width="140">*</td>
<td width="175">*</td>
</tr>
<tr>
<td colspan="2" class="style15">Closed Positions </td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>
<div align="center">
<strong><span
class="style17">Stock</span></strong></div>
</td>
<td>
<div align="center">
<strong><span class="style17">Date
Bought</span></strong></div>
</td>
<td>
<div align="center">
<strong><span class="style17">Date Sold
</span></strong></div>
</td>
<td>
<div align="center">
<strong><span class="style17">Time Held
</span></strong></div>
</td>
<td>
<div align="center">
<strong><span class="style17">Price (Recommended)
</span></strong></div>
</td>
<td>
<div align="center">
<strong><span class="style17">Price (Sold)
</span></strong></div>
</td>
<td>
<div align="center">
<strong><span
class="style17">Profit/Loss</span></strong></div>
</td>
</tr>
<tr> <tr bgcolor="#E6FFFF">
<td class="tickerbody">GT</td>
<td class="numbersbody">01/05/2011</td>
<td class="numbersbody">04/29/2011</td>
<td class="numbersbody">114 Days</td>
<td class="numbersbody">$12.69</td>
<td class="numbersbody">$18.20</td>
<td class="numbersbody">43.42%</td>
</tr>

<tr bgcolor="#E6FFFF">
<td class="tickerbody">CMG*</td>
<td class="numbersbody">07/08/2011</td>
<td class="numbersbody">08/18/2011</td>
<td class="numbersbody">41 Days</td>
<td class="numbersbody">$325</td>
<td class="numbersbody">$285</td>
<td class="numbersbody">12.36%</td>
<td class="numbersbody">*Cover of a Short position</td>
</tr>

<tr bgcolor="#E6FFFF">
<td class="tickerbody">GT</td>
<td class="numbersbody">09/06/2011</td>
<td class="numbersbody">10/24/2011</td>
<td class="numbersbody">2 1/2 months</td>
<td class="numbersbody">$11.11</td>
<td class="numbersbody">$13.58</td>
<td class="numbersbody">24.46%</td>
</tr>

<tr bgcolor="#E6FFFF">
<td class="tickerbody">OLN</td>
<td class="datebody">10/04/2011</td>
<td class="numbersbody">10/27/2011</td>
<td class="numbersbody">23 Days</td>
<td class="numbersbody">17.17</td>
<td class="numbersbody">$21.37</td>
<td class="numbersbody">24.46%</td>
</tr>

I'm looking for some help getting an html table I created to be at the top of a page. It looks alright to me, but then when I post it to my blog it has like 50 blank lines and puts it at the bottom of the page. I want it right at the top.

I'm not the best at html, especially tables... I just try and copy excisting table examples and add my own information. If someone can help it would be greatly appreciated. Heres the code:

HTML Code:

<table cellspacing="1" cellpadding="2" border="1">
<tbody></tbody></table><table border="6">
<tbody><tr>
<td><b><center>Player</center></b></td>
<td><b><center>G</center></b></td>
<td><b><center>PA</center></b></td>
<td><b><center>AB</center></b></td>
<td><b><center>R</center></b></td>
<td><b><center>H</center></b></td>
<td><b><center>HR</center></b></td>
<td><b><center>RBI</center></b></td>
<td><b><center>BB</center></b></td>
<td><b><center>SO</center></b></td>
<td><b><center>SB</center></b></td>
<td><b><center>BA</center></b></td>
<td><b><center>OBP</center></b></td>
<td><b><center>SLG</center></b></td>
<td><b><center>OPS</center></b></td><b>
</b></tr>
<tr>
<td align="middle">Corey Hart</td>
<td>60</td>
<td>221</td>
<td>194</td>
<td>34</td>
<td>61</td>
<td>10</td>
<td>31</td>
<td>21</td>
<td>35</td>
<td>15</td>
<td>.314</td>
<td>.391</td>
<td>.531</td>
<td>.922</td>
</tr>
<tr>
<td align="middle">Carlos Lee</td>
<td>76</td>
<td>331</td>
<td>292</td>
<td>41</td>
<td>85</td>
<td>13</td>
<td>60</td>
<td>24</td>
<td>30</td>
<td>4</td>
<td>.291</td>
<td>.341</td>
<td>.503</td>
<td>.844</td>
</tr>
<tr>
<td align="middle">Corey Hart Projected</td>
<td></td>
<td></td>
<td>294</td>
<td>51</td>
<td>91</td>
<td>15</td>
<td>46</td>
<td>31</td>
<td>52</td>
<td>22</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr></tbody></table>

Hi all,

I'm tearing my hair out trying to correct the following error.

I have one page on my site (the only long page) that has a 1px white line at the bottom in Firefox. It doesn't appear in IE and doesn't appear in my other pages (they all run off the same header and footer files).

I was wondering if you could help.

Page in question is http://free-uk-bets.co.uk/bet365.php.

I've run the page through the W3C validator for HTML and CSS and it passes.

I'm using HTML 4.01 Transitional encoding.

I think it may have something to do with the height of the divs.

Please could someone help?

If I want to make a way to have that table move ends?

I don't understand why there is white space at the bottom of the page. I am using negatives which one would assume would take away space and not add it. Below is the HTML and CSS codes. If someone could take a look at this and let me know what it is that I need to do to get rid of the white space at the bottom, I would be greatly appreciative. Thanks in advance.
McClain

HTML

Code:

<!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>Blakeslee - Quality Commercial Dishwashing and Prep Equipment</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content">
<ul>
   <li class="premiere"><a href="#"><img src="images/p1.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Flight-Type Dishwashers  <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
    <li class="primary"><a href="#"><img src="images/Rack_type_dishwasher.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Rack-Type Dishwashers  <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
    <li class="endProduct"><a href="#"><img src="images/vegetable_peelers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Vegetable Peelers  <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
    <li class="primary"><a href="#"><img src="images/door_type_dishwashers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Door-Type Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
    <li class="endProduct"><a href="#"><img src="images/food_slicers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Food Slicers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
</ul>
<img id="productBg1" src="images/first_row_background.png" />
<div id="clear"></div>
<ul class="Hproducts">
    <li class="premiere"><a href="#"><img src="images/glass_washers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Glass Washers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
   <li class="primary"><a href="#"><img src="images/undercounter_dishwashers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Undercounter Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
    <li class="endProduct"><a href="#"><img src="images/planetary_mixers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Planetary Mixers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
    <li class="primary"><a href="#"><img src="images/pot_utensil_washers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Pot &amp; Utensil Washers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
    <li class="primary"><a href="#"><img src="images/silver_stainless_burnishers.gif" alt="ok" border="none" /></a>
   <ul>
				<li class="title"><a href="#">Silver/Stainless Burnishers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
	  </ul>
   </li>
</ul>
</div>
<img id="productBg2" src="images/second_row_background.png" />

</body>
</html>

CSS

Code:

body{ margin-right: 10%; margin-left: 10%;}

#content,#nav,#productBg1,#productBg2,.Hproducts,.premiere,.primary,.title{ position:relative;}

#header{ background:url(../images/header.gif) no-repeat; width: 100%; height: 496px;}
#nav{ width:450px; height:60px; background-color:#000000; top: -220px; left:250px;}

/*************************************************/
/******************* CONENT ***********************/

#content{ width: 1100px; top: -200px; margin-left: 50px;}
#content ul{ display:inline;}
#content ul li{ display:inline; list-style-type:none;}
#content ul li a{ text-decoration:none; color: #1a4d9e;}
#productBg1{ top: -110px; left:40px; z-index: -1;}
#productBg2{ top: -410px; left:90px; z-index: -2;}
.Hproducts{ top: -100px;}
.premiere{ margin-left: 15px;}
.endProduct{ margin-left: -180px;}
.primary{ margin-left: -140px;}
.title{ right: 200px; top:10px;}