CSS - Trouble Aligning Footer And Floating An Image

I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5).

The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1).

Here's the CSS:
Code:

ul#nav {
	width: 890px;
	font-size: 0.70em;
	list-style: none;
	padding: 0;
	margin-top: 3em;
	float: left;
	clear: both;
}

ul#nav li {
	background-color: #0776a0;
	text-align: left;
	float: right;
	text-transform: uppercase;
	border-right: 2px solid #279bd5;
	display: block;
}
	
ul#nav li a, ul#nav li a:visited {
	display: block;
	padding: 0.4em 4em 0.4em 0.4em;
	color: #FFF;
	text-decoration: none;
}
	
ul#nav li a:hover {
	color: #FFF;
	background-color: #279bd5;
	text-decoration: none;
}
		
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
	color: #FFF;
	text-decoration: none;
}

And here's the html
Code:

	<ul id="nav">
		<li><a href="Home" title="Home">Home</a></li>
		<li><a href="Example" title="Example">Example</a></li>
	</ul>

Will also post website with the example if asked.

In my footer I'm having a problem with my links aligning left. I'm not sure how I would go about coding it so that Promotional Kit aligns left underneath Headshot v2. I tried text-align: left in ul, li, and in the footer link section but nothing. I may need to change the layout all together which is fine, but I could use your help.

Thanks in advance

http://www.lonniebruhn.com/sitelab/

and here is the css code:



Code:

body, html {
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
background-color: #000;}

#container {
margin: 0px auto 90px auto;
width: 940px;
text-align: left;
background-image: url(images/container-bg.jpg);
background-repeat: no-repeat;
background-color: #1d1d1d;;
overflow: hidden}

object {
display:block;
z-index:1}

#header {
width: 920px;
position: relative;
top: 5px;
margin: 0 auto;
background-color: #333;
border: 2px #000 solid;}

#header h1 {color: #ffffff;
font-size: 2em;
font-family: Impact, "Arial Black", Trebuchet, sans-serif, "Times New Roman";
line-height: 90%;
text-align: center;
margin: 0;
padding: 10px;}

.quote {
position: relative;
text-align: right;
Left:10px;
font-family: "Arial Black", Verdana, Helvetica, Arial, sans-serif;
color: #ffcc33;
font-size: .5em;
font-style: italic;
}

#logo {
position: relative;
margin:0 auto;
background-image: url(images/header-logo.jpg);
background-repeat: no-repeat;
width:920px;
height:120px;
border: 2px #000 solid;
}

#left {
margin: 15px 10px 0px 10px;
width:180px;
position: relative;
width: 180px;
float: left;
border: 2px #000 solid;
background-color: #333;}

#left h1{
height:20px;
margin: 10px auto;
color: #ffcc33;
font-family: Impact, "Arial Black", Verdana, Helvetica, Arial, sans-serif;
font-size: 1.50em;
text-align: center;
text-decoration: underline;
}

#dates {
position: relative;
margin: 0 auto;
text-align: left;
}

#dates ul {
margin:0;
color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: .625em;
font-weight: bold;
position: inherit;}

#dates li {
padding: 10px 0 5px 5px;
list-style-image: url(images/1.gif);
display: list-item;
margin: 0px 18px 15px -15px;
list-style-type: none;
text-align:left;
border-bottom: 2px #ffcc33 dashed;}

#mainbody {
position: relative;
background-color:#333;
width: 480px;
min-height:320px;
margin: 15px auto;
right: 20px;
border: 2px #000 solid;
}


#right {
position: relative;
width: 220px;
background-color: #333;
min-height: 320px;
float: right;
border: 2px #000 solid;
margin-top: 15px;
margin-right: 10px;}

#right h1 {
text-align: center;
color: #ffcc33;
font-family: Verdana, Arial, sans-serif;
font-size: 1.25em;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;}


#footer-wrap {
background-image: url(images/footer-bg.gif);
width: 100%;
height: 78px;
z-index: 2;
left: 0;
bottom: 0;
position: fixed;
text-align:left}

#footer-left {
position:fixed;
width: 244px;
min-height:68px;
margin-top: 5px;
border-right: 2px #000 solid;
left:-25px;
padding-right: 25px;
float:left;}

#footer-left ul{
display: block;
margin:0;
width:244px;
list-style-type: none;

}

#footer-left li {
display: inline;
margin-right:10px;
}

#footer-wrap a:link, #footer-wrap a:visited, #footer-wrap a:active {
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .75em;
text-decoration: none;
}

#footer-wrap a:hover {
text-decoration: underline;} 



#footer-center {
position: fixed;

}

#footer-right {
position: fixed;

}




p {
margin:0 25px 25px 25px;
font-size: .875em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";

color: #fff;
text-align: justify;}

#links{
text-align: right;
padding: 2px;

}

#links a:link, #links a:visited, #links a:active {
right:8px;
font-weight: bold;
font-size: 0.625em;
font-family: Verdana, Arial, sans-serif;
color: #cccccc;
font-family: Verdana, Arial, sans-serif;
text-decoration: none;
position: relative;}

#links a:hover {
text-decoration: underline;}

#links ul {margin: 0; list-style-type:none}

#links li {
display: inline; 
}

#menu
{ height: 15px;
 
  width: 920px;
  height:22px;
  position: relative;
  margin: 0 auto;
  background-color: #333;
  border-left: 2px #000 solid;
  border-bottom: 2px #000 solid;
  border-right: 2px #000 solid;}

#menu ul{margin: 0 auto;} 

#menu li
{ float: left; 
  margin: 0;
  padding: 0;
  list-style: none;
} 

#menu li a 
{ display: block; 
  height: 20px;
  text-decoration: none; 
  padding: 0 19px 0 19px;
  border: 2px #000000 solid;
  text-transform: uppercase;
  font-size: 0.75em;
  font-family: Verdana, Helvetica, Arial,sans-serif; 
  color: #ccc;
  background-color: #666;} 

#menu li a:hover, #menu li a#selected, #menu li a#selected:hover 
{ border: 2px #000000 solid; background-color: #3f3f3f;
} 

.postdate {
display:block;
margin: 10px 20px 20px 20px;
padding-left: 10px;
color: #ffcc33;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.75em;
background-color: #000;}

.post p {
margin: 0px 5px 0px 5px;
font-size: .75em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
padding-top: 20px;
line-height: 120%;
}


.post h1 {
margin: 0px 5px 0 5px;
color: #ffcc33;
font-size: 1.2em;
font-family: Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
text-decoration: underline;}

.post h2 {
margin: 0px 20px 0 20px;
color: #ffcc33;
font-size: .6em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 15px 10px 5px 10px;
text-transform: uppercase;
border-bottom: 8px #666 double;}

.blue {
color: #3399ff;;
margin: 5px 0 10px 0;
display: block;}


.video {
width: 190px;
margin: 10px auto 0px auto;
z-index: 1}

I'm working on a new page at http://www.plumeriawebdesign.com/webdevgirl/ and am having problems aligning the middle div column.

In IE it shows approximately 25px below the dark blue date bar while it shows correctly in FF. I'm also having problems with it extending further than the 100% wrapper div.

Here is my HTML

Code:

<body>
<div id="wrapper">
  <div id="top" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
	<div id="nav">
	  <?php
	    $today = date("D M d Y");
		echo "$today\n";
	  ?>
	</div>
	<div id="left">left column</div>
	<div id="right">right column</div>
  <div id="middle">middle column</div>
</div>
</body>

CSS is he

Code:

/* CSS Document */
html {
  height: 100%;
}
body {
	margin: 0px 0px 0px 0px;
	background-color:#333;
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
	position: relative;
	min-width: 600px;
	width: 100%;
	height: 100%;
	color: #333;
}

#wrapper {
  width: 100%;
  height: 100%;
}
html>body #wrapper {
  height: 100%;
}
#left {
  float: left;
  left:0px;
  top:113px;
  width:12%;
  background-color: #a2cde3;
  border-right: 2px solid #333;
  padding: 5px 5px;
}

#middle {
  top: 0px;
  voice-family: "\"}\"";
  voice-family: inherit;
  margin-left: 12%;
  margin-right:12%;
  padding: 5px 5px;
  height: 100%;
  min-width: 360px;
  width: 76%;
  background-color: #626262;
  color: #000;
}

html>body #middle {
  margin-left: 12%;
  margin-right:12%;
}

#right {
  float: right;
  top: 0;
  width:12%;
  background-color: #a2cde3;
  border-left:  2px solid #333;
  padding: 5px 5px;
}
	
#top {
  min-width: 600px;
  width: 100%;
  height: 100px;
  background-color: #FFF;
  color: #FFF;
  voice-family: "\"}\"";
  voice-family: inherit;
}
html>body #top {
  height:100px;
}

#nav {
  top: 100px;
  left: 0;
  min-width: 600px;
  width: 100%;
  height: 12px;
  background-color: #005698;
  color: #e4e4e4;
  vertical-align: bottom;
  text-align:left;
  text-indent: 5px;
  clear: both;
}
	

www.devwebsites.com is the url. You wil see the login box below teh ads and I am trying to get the login stuff to be next to the ads.

heres my code
Code:

<table cellspacing="0" cellpadding="0" border="0" style="padding-left:12px;margin-top:-9px; padding-top:3px;">
<tr>
<td class="header">
<script type="text/javascript"><!--
google_ad_client = "pub-0405738179168907";
/* 468x60, created 9/20/08 */
google_ad_slot = "6289309218";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


	<form method="post" id="commentform" action="" name="smelogin">
	 Username :  
	<div><input type="text" id="username" size="11" name="username" style="background-image:url(/images/u.gif); background-position:left; background-repeat:no-repeat ; height: 18px; width:15%; display:block;    border-bottom:#000000 solid 1px; padding-left:18px;" maxlength="21" /></div>

	<div> Password :  
	<input type="password" style="background-image:url(/images/p.gif); background-position:left; background-repeat:no-repeat ; height: 18px;width:15%; display:block;  border-bottom:#000000 solid 1px; padding-left:18px;" id="password" size="11" name="password" maxlength="25" /></div>

</td>
</tr>
</table>
	<div align="center"><input type="submit" name="login" value="   Login   ">
	</div>
<p><a style="font-size: 8pt;background:transparent;padding:0px;" href="/register.html"><div>[ Signup ]</div></a>

Help?

Just practicing but can anyone tell me why my footer doesn't stick to the bottom of the page? Also why does my page scroll sideways when I include my table?

http://csstest.dmsbdesign.com/templates/templates%201/

css here
Code:

@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
	background-color:#F7F7F7;
	height:100%;
}
.quicklink{
	padding-bottom:10px;
	padding-top:10px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	list-style-type:none;
	width:220px;
	text-align:left;
	padding-left:5px;
}
#container{
	background-color:#E1E1E1;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:100px;
}
#header{
	background-color:#666666;
	width:1000px;
	height:100px;
	margin-left:auto;
	margin-right:auto;
}
#logo ul{
	margin:0px;
	position:relative;
	left:-15px;
	bottom:60px;
}
#logo li{
	text-align:right;
	list-style-image: none;
	list-style-type: none;
}
#logo{
	position:relative;
	left:5px;
	top:10px;
}
#logo img{
	height:75px;
	width:75px;	
}
#logo h1{
	position:absolute;
	margin:0px;
	left:75px;
	top:15px;
}
#logo h2{
	position:absolute;
	margin:0px;
	left:75px;
	top:45px;
}

#nav{
	background-color:#999999;
	width:1000px;
	height:25px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#nav ul{
	margin-top:0px;
}
#nav li{
	display:inline;
	list-style-type:none;
	padding-right:80px;
}
#pictureDiv{
	margin-top:10px;
	width:940px;
	height:240px;
	margin-left:auto;
	margin-right:auto;
	background-color:#CCCCCC;
	padding: 5px;
	border:1px #000000 solid;
}
#contentDiv tr {
}

#pictureDiv h1{
	position:relative;
	margin:0px;
	width:200px;
	font-size:24px;
	left:735px;
	top:-150px;
	color:#ff0000;
}	
#pictureDiv img{
	position:relative;
	left:10px;
}
#contentDiv{

	margin-top:10px;
	width:900px;
	height:325px;
	margin-left:auto;
	margin-right:auto;
}
#contentDiv table{
	position:relative;
	top:-510px;
	left:550px;
	width:375px;
}
#contentDiv tr{
	
}
#contentDiv td {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-bottom:10px;
	padding-top:10px;
}

#contentDiv p{
	width:75%;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
}
#contentDiv h1{
	margin:5px;
}
#footer{
	position:relative;
	z-index:-1;
	margin-top:-50px;
	background-color:#666666;
	width:100%;
	height:100px;
	margin-left:auto;
	margin-right:auto;
}

html here
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>My Page</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
	<div id="logo">
        <img src="../../images/Placeholder.png" />
        <h1> My Webpage </h1>  
        <h2> My Slogan </h2>
        <ul>
        	<li> Phone Number: 555-555-5555 </li>
        	<li> Address: 123 Main St </li>
    	</ul>     
    </div>
</div>
<div id="nav">
	<ul>
    	<li>Nav 1</li>
        <li>Nav 2</li>
        <li>Nav 3</li>
        <li>Nav 4</li>
        <li>Nav 5</li>
        <li>Nav 6</li>
        <li>Nav 7</li>
    </ul>
</div>
<div id="pictureDiv">
	<img src="../../images/png/Placeholderstreched.png" />
    <h1>Maecenas sollicitudin ultricies neque ut condimentum. Cras id dui dui?</h1>
</div>
<div id="contentDiv">
	<h1>Nam vitae lorem!</h1>
    <p style="width:500px;">Praesent molestie orci semper lectus aliquet ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ut diam faucibus magna tempus viverra quis id lorem. Quisque ac pulvinar erat. Nullam pretium, ipsum non cursus facilisis; arcu massa viverra quam, sit amet venenatis arcu elit sit amet arcu. <br /> <br />Proin tempus blandit ante non ultrices. Fusce posuere adipiscing metus, a dapibus risus tristique a! Integer faucibus urna commodo metus suscipit sollicitudin. Duis gravida gravida rhoncus. Sed eget felis in risus euismod imperdiet. Proin quis libero quis purus tincidunt facilisis at non massa. Integer auctor aliquam lorem eget sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <ul style="position:relative; right:20px;">
    	<li>Suspendisse sagittis leo leo. Lorem.</li>
        <li>Suspendisse elit velit, scelerisque ut.</li>
        <li>Nullam nec magna risus, adipiscing.</li>
        <li>Etiam luctus ullamcorper libero ac.</li>
        <li>Aenean pretium orci mollis orci.</li>
    </ul>
    <ul style="position:relative; top:-116px; left:250px;">
    	<li>In quis arcu justo, sed.</li>
        <li>Nullam elementum varius.</li>
        <li>Nulla egestas vehicula erat.</li>
        <li>Nam congue rhoncus gravida.</li>
        <li>Pellentesque habitant morbi tristique.</li>
    </ul>
    <table width="290" border="0" cellspacing="0">
  <tr>
    <td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
    <td width="321" valign="middle"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />
      Aliquam ac odio sit amet ligula ornare.</td>
  </tr>
  <tr>
    <td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
    <td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
  </tr>
  <tr>
   <td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
    <td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
  </tr>
  <tr>
    <td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
    <td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
  </tr>
  <tr>
    <td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
    <td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
  </tr>
</table>

    
</div>
</div>
<div id="footer">content for id "footer" goes here</div>
</body>
</html>

The problem that I am having stems from attempted compatability for
1. IE/other browsers, and
2. Not scrolling or having an absurd amount of dead space on different resolutions.

Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else.

I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn.


I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them?



The Actual Problem I Have:
(Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly.

Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="poing.css">
<link rel="icon" type="image/png" href="img/RL16.png"/>
<title>[ eroding.net ]</title></head>
<body>
<table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" 

valign="bottom"><tr><td width=100% align=center valign="bottom">

<table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td 

background="img/top_left.png" width=14 height=39></td>
<td background="img/top.png" width=622 height=39><img src="img/top_left2.png" 

border=0></td>
<td background="img/top_right.png" width=14 height=39></tr></td> <tr><td 

background="img/left.png" width=14 height=1></td>


<td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 

background="img/table_bg_grunge.png" valign="top">
<br><br>
<center>

aaa

<br><br>



</center>

</td><td background="img/right.png" width=14></tr></td></table>
</tr></td></table>


</body></html>

CSS
Code:

body	{ font-style: normal; font-variant: normal; font-weight: normal; 

font-size: 12px; 
                font-family: Tahoma, Arial; background-color: #0F0F0F; 

color: 
                #424242; background: url(img/damask.png); 

background-attachment: 
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align: 

bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}


sm {font-size: 0.9em; }


a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }

What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box."

But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that).

Can someone please help me?

I am trying to get my left side column to meet my footer image... just like on this website:

newcastlegateshead.com

See how they side bar goes all the way down and meets the footer?

Mine has a one inch gap between the bottom of the column and the footer.

Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss

Thank you so much...

Trying to delete my post but no option to delete so just removing content.

So I'm not really new to CSS or HTML though I might as well be considering the last time I did anything in either that had much substance was a class back in high school, about 6 years ago.

This is what I want...

DIV1 --------------- DIV2 --------------- DIV 3

2 would be in the center with 1 and 3 floating left and right respectively.

Instead I'm getting this...

DIV1 --- DIV2

----------------------------------------- DIV 3

or

DIV1
DIV2
DIV3




...I hope you guys get the idea. I'm having trouble figuring it out.

My ext CSS sheet, if you care to look, is he
http:// livingway.110mb. com/mainstyle.css

the frame in question, he
http:// livingway.110mb. com/main.htm

I'm hoping it'll let you all look at them. It's nothing professional yet because I'm only trying to give an update idea to our "webmaster". Anywho, let me know what I'm doing wrong. My brain hurts right now.

I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09


I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.


Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:


I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

Hi,
I'm getting very frustrated trying to float in image to the right and vertically aligned in a TD cell.
This is a actually a vBulletin Forum Home Page and I want to display an image in the forum description.
With the inline CSS below I keep getting a new line which I don't want. I want the text "Forum description goes here" with the image vertically aligned on the right hand side of the TD cell.

Code:

<td class="alt1Active" align="left" id="f34">
	<div>
		<a href="http://www.myurl.co.uk/forums/test_forum/"><strong>Test Forum</strong></a>
	</div>
	<div class="smallfont">
		Forum description goes here.
		<!-- *** THIS IS THE BIT I HAVE CONTROL OVER *** -->
		<div align="right" valign="top" style="float:right;">
			<a href="http://www.myurl.co.uk">
			<img src="http://www.myurl.co.uk/picture.jpg" style="border:0px;">
			</a>
		</div>
		<!-- ****** -->
	</div>
</td>

I want "alternate views" text and thumbimage stand on the same line. I dont understand why the image moves a line below. Please advise.


PHP Code:
 html:
#product .productimage .thumb {  float:left; width: 250px; border-bottom:1px dotted #ece7d1; }
#product img#thumbimage { float:right;    width: 16px; height: 16px; border: 0px; }

css:
            <div class="thumb">
                alternate views : <img src="http://www.refinethetaste.com/html/THEMES/default/images/pictures.png" id="thumbimage" />
            </div> 

Ok the problem is hard to explain but here it goes:
I have news items that are divs, inside that div i have a floating left image, then i have the news content.

The problem comes when I view it in Firebird. It seems the next news item starts at the bottom of the floating image. This causes serious problems with the text. I tried this .clear css style:
clear: both
height: 0
line-height: 0

but it just seemed to help with one (bringing the second one below the bottom of the page).

Does anyone know what might be the problem?
Here is the link:
http://www.cjweed.com/porttest

As you can see IE displays everything like a champ, mozilla likes to mash it together.

Please help