CSS - Trying To Get Equal Height For Divs Next To Eachother

Hi all!

After trying more then a few things I'm about to give up, so I hope someone here has the answer.

The problem is the following:
* A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage.
* All three columns should have the same length as the longest column.
* When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen.

Point 2 is doable.
Point 3 is doable.
But the combination of point 2 and 3 seems quite hard.

Hope someone has an idea .

Thanks!

I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns.

I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns.

You can see a non-css example at: http://www.sananselmopreschool.org/pilot/

Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so.
body {
height:100%;
padding:0;
margin:0;
background-color:#ECF6DD;
font-family: Tahoma;
font-size: 11px;
color: #707070;
text-align:center;
border: 1px solid purple;
}

.body_container {
position: relative;
height:100%;
width:100%;
left: 0px;
border: 1px groove darkred;
}
.body_position_center {
height:100%;
position:relative;
width:780px;
margin-right: auto;
margin-left: auto;
border-collapse:collapse;
border: 1px solid #999 ;
}

.header {
padding:0;
margin:0;
position:relative;
width:766px;
height:195px;
}

.leftblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}

.centerblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.rightblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.blockcontents
{
padding-top:14px;
padding-bottom:14px;
border-bottom : 3px dotted #228B22;
text-align:left;
}

Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution.

Here's the template I'm working on: http://dhost.info/justusvizslas/template.php

Here's my problem:
I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7

I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height.

Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too:
CSS
Code:

#container {
		width:792px;
		height:50px;
		margin: auto auto;
		color:#000000;
		background-color:#FFFFFF;
		background-image:url(design/menuimage.gif);
		background-repeat:repeat-y;
		}
		
#navigation {
		width:125px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		vertical-align:top
		}

#pagecontent {
		width:667px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		color:#000000;
		background-color:#FFFFFF;
		text-align:center
		}

PHP
Code:

<div id="container">
  	<div id="navigation"><?php include "nav.php"; ?></div>  
	<div id="pagecontent">
  		<br />Some more content here<br />
	</div>
</div>

Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference.

Hey everyone,

I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks.

If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either.

I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid.

Any ideas?

HTML4Strict Code:
Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>

  

  


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


  


 <html>


 <head>


     <style>


 body{


     width:100%;


     height:100%;


     padding:0;


     margin:0;


     color:#ffffff;


     background-color:#000000;


 }


 object{


     float:left;


     clear:both;


     width:80%;


     height:100%;


     background-color:#cccccc;


 }


 .section{


     float:left;


     clear:none;


     width:48%;


     height:48%;


     margin:1%;


     background-color:#333333;


     display:block;


     position:relative;


 }


 .panel{


     float:left;


     clear:none;


     width: 16%;


     height:96%;


     margin:2% 2%;


     background-color:#cccccc;


     


 }


 #container{


     float:left;


     clear:both;


     width:100%;


     height:100%;


     min-height:100%;


     background


 }


     </style>


 </head>


 <body>


     <div id="container">


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


     </div>


 </body>


 </html> 

What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border.

Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line.

My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div?

Here is an example of what I have right now (before tackling the problem):

CSS:
Code:

#content {
	width: 800px;
	margin: 0;
	padding: 0;
}

#contentNav {
	width: 140px;
	float: left;
	border: thin solid black;
	margin: 0;
	padding: 0;
}

#contentMain {
	width: 600px;
	float: right;
	margin: 0;
	padding: 0;
}

HTML:
Code:

 
<div id="content">
	<div id="contentNav">
		<a href="">Link1</a><br />
		<a href="">Link2</a><br />
		<a href="">Link3</a><br />
	</div>
	<div id="contentMain">
		<p>Here comes a lot of text that spans over many lines.
	</div>
</div>

Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another.

However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option.

Here is my example;

Code:

<html>
	<head>
	
		<style>
		
		.main {
			margin: 0px auto;
			width: 800px;
			border: 2px solid red;
		}
		
		.wrap:after{

			content: ".";
			display: block;
			position:relative;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		.wrap{

			display: inline-block;
		}

		/* Hides from IE-mac \*/
		* html .wrap{height: 1%;}
		div.wrap{display: block;}
		/* End hide from IE-mac */
		
		
		.left {
			float: left;
			width: 100px;
		}
		
		.right {
			float: left;
			width: 680px;
			border: 10px solid blue;
		}
		
		
		</style>
	
	</head>
	<body>
	
		<div class="main">
			<div class="wrap">
				<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
				<div class="right">My Right div has only one line but need border till down there ...</div>
			</div>
		</div>

		
	</body>
</html>

As you can see in the example the border of the right div does not go down till the bottom border of the main div.

I was experimenting this weekend with some CSS 'page-sculpting', using small divs to make shapes, etc.

I used FireFox as my testbed and of course everything went smoothly. I switched over to IE6 and saw that every div had a minimum height-it looked like 1em.

I specified height and width on all <div>. Some used borders, some did not. An example would be:
PHP Code:
<div style="height:2px; width:3px; background:green" ></div> 





Has anyone else come across this or know of a fix? I haven't tried <span> or other tags (I will...just thought of that), tho I suspect they'll behave the same.

Any help appreciated.

NotGoddess

I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished.

However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation.

However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work...

Here's my css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1024px;
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
}

#accounttypeselector { /* select personal or business to affect page display */
	height: 25px;
	background: #0000FF;
}

#servicesbar { /* container for user services */
	height: 30px; /* 30px should be adequate height */
	width: 100%;
}

#servicesbar-services { /* container for user services once logged in */
	float: left; /* push this to left side */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	float: left; /* should push this just beside services */
	width: 25%;
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #8B2323;	
}

#header { /*header for the site - will contain logo, search, and main navigation */
	float: left;
	width: 1024px;
	height: 100px;	
}

#header-logo { /* will include site banner/logo - will be located on left side */
	background: #ff0000;
	width: 50%;
	float: left;
}

#header-rightcol { /* column for search and main nav */
	width: 50%;
	float: left;
}

#header-rightcol-search {
	min-height: 50%;
	max-height: 50%;
	background: #7FFFD4;
}

#header-rightcol-navmain { /* navbar that will be located below header */
	min-height: 50%;
	max-height:-50%;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	height: 100%;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	float: left;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 60%;
	background: #66CDAA;
	float: left;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 25%;
	background: #8A2BE2;
	float: left;
}

#footer { /* footer to be located at bottom of wrapper */
	margin: 0 auto;
	position: relative;
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}

and here's my basic html
Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
			<div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div>
		</div>
		
		<div id= "header" >
			<div id= "header-logo" >
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
			adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
			penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
			libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
			cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
			pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
			in dui. In eget elit. Praesent eu lorem.</div>
			
			<div id= "header-rightcol" >
				<div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
				<div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
			</div>
			
		</div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" >
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.
			</div>
			<div id= "bodywrapper-main" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
			<div id= "bodywrapper-news" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
		
		</div>
	
	</div>
	
	<div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</body>
</html>

Thanks in advance and any suggestions would be greatly appreciated.

Hi, I have been puzzle for a while now working out how to do this.

I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox).
Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE.

I currently have:
<div id="diva">
<object id="face1" width="320" height="110">
<param name="face1" value="face1.swf">
<embed src="face1.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="divb">
<object id="face2" width="320" height="110">
<param name="face2" value="face2.swf">
<embed src="face2.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="clear"></div>

With the relavent css:
#div1 {
background-image : url(images/bg1.gif);
width: 381px;
height: 346px;
float: left;
text-align : center;
vertical-align : bottom;
}
#div2 {

background-image : url(images/bg2.gif);
width: 381px;
height: 346px;
float: right;
text-align: center;
vertical-align : bottom;
}
#clear { clear: both; }
img {
border: 0px;
}
#face1{

padding-top: 220px;
left: 30px;
}
#face2{
position: relative;
top: 220px;
left: 10px;
}


Effectively what I want is:
Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE!

Thank you for your time.

I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways?

Thanks,
Carlos

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>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
  <div id="navbar">
    <p>testing</p>
    <p>testing</p>
    <p>testing</p>
  </div>
</div>
</body>
</html>

My CSS


Code:

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

body {
	background-color: #000;
	margin-top: 17px;
	margin-bottom: 15px;

}
#header {
	background-image: url(images/header.jpg);
	margin:0 auto;
	height: 167px;
	width: 810px;
	background-repeat: no-repeat;
}

#maincontent {
	background-image: url(images/coatedmetalsm.jpg);
	background-repeat: repeat;
	margin:0 auto;
	width: 810px;
	height: auto;
}
#navbar {
	float: left;
	width: auto;
	position: relative;
}

Hi Folks,
Does anyone know why a floated DIV would push another DIV out of the way? Or even why two floated divs would not want to sit either side-by-side or one infront of the other?

Sorry this is actually the jist of a prob I had earlier, but I'm simplifying the question - hope that's okay.

Thanks
John

I am creating a dropdown menu based on suckerfish. The top level appears correctly, however the first submenu level puts all the menu items stacked over top of eachother right under the top level. Everything is correct except the items are overlapping. My html and css are below.

<ul id="nav">
<li style="border-left: none;">
<link here>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
</ul>


#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
}

#nav li {
float: left;
padding: 0px 10px 0px 10px;
}

#nav li ul {
position: absolute;
width: 200px;
color: #FFF;
background-color: #000;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

#nav li ul ul {
margin: -1em 0 0 10em;
}

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
left: auto;
}

My CSS is pulled pretty much straight from suckerfish. there are a few small changes like the widths and background color, but the issue was there even when it was a direct copy. Currently I am only trying to get this to in firefox, as I am getting the same issue in every browser I try.

Just an fyi, I am using umbraco as the CMS for this site, and it is generating the html for the menu. There are actual links I just cant post them as I am new here, they contain just the hfer attribute.

Thanks

My problem is pretty obvious when you look at the following link. Currently only the first three links in the list in the middle work. (Firewall, power backups, tape backup system):

http://www.zacwittedesign.com/jeremy/network.html

They show/hide correctly, but I need them to end up on top of eachother. I don't know how to do this without using the absolute positioning, but I can't use that because it needs to be reletive to the rest of the page. Can't I somehow anchor the layers at the same point?

Thanks,
Zac

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>