Clear a previous float

HTML & CSS
1

The W3C float specification requires that a cleared element shall stay below all previous floats. There are no exceptions to this requirement! “Previous” in this case means any float that comes earlier in the source document.
My question is, How to properly clear a floated div that is inside of the parent div also floated?
css:


<style type="text/css">
body {
	background-color: #ceefde;
	background-image: url(images/pawsw2e.gif);
}


.maindiv1 { margin-left:auto; margin-right:auto; display:block;
	text-align:left;
	float:left;
	width:10%;
	/*padding-left:10%;*/
	border:5px solid #90F;
	font-size: large;
    font-weight: bold; }	
.maindiv2 { margin-left:auto; margin-right:auto; display:block;
	text-align:center;
	width:70%;
	float:left;
	padding-left:10%;
	border:5px solid blue;
	font-size: large;
    font-weight: bold; }
</style>

HTML:


<body>
<div class="maindiv1">
some<br />
content<br />
</div>
<div class="maindiv2">


	<div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #C00;">
    test<br />
	test<br />
    test<br />
	test<br />
    test<br />
	test<br />
    </div>
   <div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #0C0;" class="clearfix" >
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    </div>
    <div style="clear:both;"></div> <!--Is this line ok if I want some regular content on next line?-->
    <p style="text-align:left;">hi</p> <!--Note main div is also floated left-->

	<div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #C00;">
    test<br />
	test<br />
    test<br />
	test<br />
    test<br />
	test<br />
    </div>
    <div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #0C0;">
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    </div>
</div>
</body>
</html>

The above works, but is it the correct way to clear just the above div, put some content, then put more floated div's?
A page that show what I'm trying is:
[http://www.taylorjoneshumane.com/zevents_new3.html](http://www.taylorjoneshumane.com/zevents_new3.html)
2

not 100% sure of what you’d like to achieve. The humaneSoc page looked like an old fashion table layout (no offense. we all did it)on closer inspection (google chrome) the page reads like a div overkill.
you could use the list property to align and style this page.

But it is pretty common to create a class in the css style sheet that will clear the floats. then you can add it you your elements.

.clear{
margin:0px;
padding:0px;
clear:both;
}

I am sure other folks here will have other/better suggestions as well.
D

3

Am not sure I understand your Q.

but if what you are asking is HOW TO KEEP THE PARENT ELEMENT from collapsing when it contains a float… the answer is it doesnt collapse! :slight_smile:

if you float an element, all floated children are automatically contained, as you saw.
in General, there are many methods to clear floats, but the best solution is the one that makes sense in THAT particular situation.

example, if you have a few floated elements in your HTML, and there is an unfloated element AFTER the float simply give THAT element clear:both;. In other words USE EXISTING ELEMENTS, why complicate things? (this is essentially, kind of , what PDXShepa was saying)


.floated { float:left;}
.clear { clear:both;}
<div class='cont'>
   <div class="floated">content </div>
   <div class="floated">content</div>
   <div class="floated">cotent</div>
   <div class="clear">content</div>
</div>

if you find that you dont have an element that follows your floated element you can MAKE one using :after, this way it keeps your mark up PURE
.cont:after{
content:‘’;
display:block;
clear:both;
…
}
IE lt 8, has a problem with this, but there are ways around it

HOWEVER, it EVEN better and more cross browser friendly to give the container element a different rendering context with:

display:table; ( again IE doesnt like this tho)
display:inline-block;
or
overflow:hidden; which has the least side effects of all the method mentioned

hope that helps.

4

Thanks for replying
You stated:

if you have a few floated elements in your HTML, and there is an unfloated element AFTER the float simply give THAT element clear:both;

This makes sense to me.
However what if my main div is also floated left, and the page is like this:
[/QUOTE]


.floated { float:left;}
.clear { clear:both;}
.clearfix:after { clear:both;}
.
.
<div class='cont' also floated left>
   <div class="floated">content </div>
   <span class="clear">content</span>    <!--Is it alright to use the clear here since the top most div is also floated
   <div class="floated">content</div>       Or will I have to put the span line after main div and start a new div afterwards-->
   <div class="floated">cotent</div>
   <div class="clear">content</div>
</div>

OR is this correct:


<div class='cont clearfix'  This div also floated left>
        <div class="floated">content </div>
</div>
<span>content</span>
<div class='cont clearfix'  This div also floated left>   <!-- NEW MAIN DIV STARTED -->
     <div class="floated">content</div>
     <div class="floated">cotent</div>
</div>

All I want to know is will the top code be fine, or must I use the bottom code? Does the non-floated span have to be outside of the top level floated div?

5

You DONT need to clear .cont BECAUSE its floated. You MAY need to clear what ever wraps around .cont, but a floated element AUTOMATICALLY clears it’s floated ‘innards’ , if you will, therefor you dont needto do any sort of clear fix.

All I want to know is will the top code be fine, or must I use the bottom code? Does the non-floated span have to be outside of the top level floated div?

the right code is whichever is MOST semantically correct for your specific content, HOWEVER, as you mentioned , floats can only go as high as the previous element in the source code.

for example, if your first code sample you could achieve the same with NO floats.

<div class=‘cont’ >
<div >content </div>
<span>content </span>
<div class=“floated”>content</div>
<div class=“floated”>cotent</div>
<div class=“clear”>content</div>
</div>

the .floated still would line up BELOW the span ( which BTW, should be a div or block element another reason why you maybe having trouble).

in the second set of code … I again wonder why are you floating one container inside the other if that the only thing the outer container contains?
<div class='cont clearfix floated This div also floated left>
<div class=“”>content </div>
</div>

So, first things first, what semantically do you want to say ( w/o concerning yourself for layout or appearance) code the HTML for that, then use CSS to ‘trick’ the layout into being.

6

Below is a better sample, ignore some of the css in style, this is a test layout page only.
The only thing I want to know is this, at the place I put the word “HERE” several times, is a clearfix or a clear “legal”
in the code at this point or not? Also with a 15% left div you can see why I have to float the maindiv2 as well.
Small left div will be menu, the 70% maindiv2 class is for other content for page.

Within the 70% div there will be some images side by side enclosed inside yet other div’s, but there will be some
general text that’s not in a div.

Since I am using floats, should I use div’s for the text also? In other words just put each seperate thing in it’s
own div?



<!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>Untitled Document</title>
<style type="text/css">
body {
	background-color: #ceefde;
	background-image: url(images/pawsw2e.gif);
}
.sepdiv {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	word-spacing: normal;
	float: left;
	width: 80%;
	padding:4px;
	margin-left:auto; margin-right:auto; display:block;
}
.cf { content:".";
	/*display:table;*/
	width:100%;
	display:block;
	clear:both;
	height: 10px;
	font-size:0;
	line-height:0;
	visibility:hidden;
	overflow:hidden; }
.cf:after { clear:both; } .cf { *zoom:1; }
* html .cf { zoom: 1; } /* IE6 */
*:first-child+html .cf { zoom: 1; } /* IE7 */

.inddiv { margin-left:auto;
	 	margin-right:auto;
		display:block;
		text-align:center;
		float:left;
		/*padding-left:5px;*/
		width:90%;
		border: medium solid #06F;
		font-size: large;
   	 	font-weight: bold;
		padding-top:5px;
		padding-bottom:5px;
		}
.maindiv1 { margin-left:auto; margin-right:auto; display:block;
	text-align:left;
	float:left;
	width:10%;
	/*padding-left:10%;*/
	border:5px solid #90F;
	font-size: large;
    font-weight: bold; }	
.maindiv2 { margin-left:auto; margin-right:auto; display:block;
	text-align:center;
	width:70%;
	float:left;
	padding-left:10%;
	border:5px solid blue;
	font-size: large;
    font-weight: bold; }
.leftdiv { width:44%;
	margin-left:auto;
	 margin-right:auto;
	/*border:1px solid #15616F;*/
	float:left;
	/*padding-left:5%;*/ }
.rightdiv { width:50%;
	 font-family: "Times New Roman", Times, serif;
	 font:bold;
	 color:#00F;
	 margin-left:auto;
	 margin-right:auto;
	 /*border:5px solid blue;*/
	 float:left;
	 text-align:left;
	 padding-left:4px;
	 padding-top:60px;
	 }


.imgborder {
   border:5px solid #15616F; margin-left:auto; margin-right:auto; display:block;
}

.alignctr {
		text-align:ceneter;
}
.preclear {
	float:left;
	width:98%;
	content: " ";
	}
/* new clearfix */


.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}  /* for IE/Mac */

.cf { content:".";
	/*display:table;*/
	width:100%;
	display:block;
	clear:both;
	height: 10px;
	font-size:0;
	line-height:0;
	visibility:hidden;
	overflow:hidden; }
.cf:after { clear:both; } .cf { *zoom:1; }
* html .cf { zoom: 1; } /* IE6 */
*:first-child+html .cf { zoom: 1; } /* IE7 */

</style>

</head>

<body>
<div class="maindiv1">
some<br />
content<br />
</div>
<div class="maindiv2">


	<div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #C00;">
    test<br />
	test<br />
    test<br />
	test<br />
    test<br />
	test<br />
    </div>
   <div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #0C0;">
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    </div>
HERE HERE    <div class="cf"></div>  HERE  HERE  HERE  HERE  HERE  HERE HERE  HERE  HERE HERE  HERE  HERE HERE  HERE  HERE
    <p style="text-align:left;">hi</p>

	<div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #C00;">
    test<br />
	test<br />
    test<br />
	test<br />
    test<br />
	test<br />
    </div>
    <div style="width:40%; float:left; text-align:center; margin-left:auto; margin-right:auto; display:block; border:solid #0C0;">
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    testg<br />
	testg<br />
    </div>

</div>
<div class="cf"></div>


</body>
</html>
7

You know…I am definitely not one of the more experienced people here.
But…it might help if you could give us a visual of what you are trying to get the final page to look like?
Uploading what you got so far would be great.
if not draw a mini wireframe/schematic.
Even on something simple like “paint”

As for putting your text into divs. that would be normal. you’d then be styling w/padding/margin/text-transform & etc…or depending on what text it is you could use <article> or <section>.
But then again. it’d help if it was clear what the end product would be

8

I did, on original post there is a link to an events page. Not a final version, but in work.
Here you can see the menu on left, and other content in the other div’s.
Link: http://www.taylorjoneshumane.com/zevents_new3.html
But, ALL I REALLY want to know, is a clear:both ok to do inside a main floated left div? Look at page, the div with images and other text is
floated left. Within this is other divs floated left. After a inner div can I do a clear, add text, then enter another floated div.
WHERE do I clear:both? Basically I’m asking a yes or no question. See above post where I have:

HERE HERE <div class=“cf”></div> HERE HERE HERE HERE HERE HERE HERE HERE HERE HERE HERE HERE HERE HERE HERE

All I am asking is, is a clearfix or clear:both a legal css at that point in that code? Just yes or no. If no I will research further, if yes I
can continue.

9

Those floats you are using on boxes isn’t really doing much (except making the container enclose the contents, although that’s not really needed anyway). You can indeed use clear: both whee you have it, but again, if the element has a width of 100% (which block level elements like divs do) than you don’t need clear: both anyhow.

There is a lot more you could do to improve that page, though. It’s better not to use all those inline styles. That will be a nightmare to maintain.

10

Thank you for a reply. I have looked at dozens of modern sites lately, the source code. It’s the only way I’ve figured out
how to make one div sit next to another div is using float. If you don’t float, then the new div goes below previous one.
And I can’t use 100% because I have occasion to put 2 divs side by side with images.

One thing for sure, I do have to do a lot of math to figure padding / margin. One trick I got from anothher humane society
site is using an empty div to push over other divs. Frankly this seems better than figuring padding or margins.
Basically float a "shim or spacer div left, then float 2 divs you want more centered. Bare in mind I used tables in past
which was never a problem. I am just starting to use divs for positioning.

I may wind up sticking with tables, big deal if the cells have content and not just data.

And real page wont have inline styles, but a stylesheet. I test a lot using inline styles.

11

rather than looking just at other site you might be better off finding some good tutorials on youtube. or a good book
I would definitly reccomend the tutorials from phpacademy. They have a great css playlist.
a lynda.com account is also not very expensive and it the end it would most likely save you a lot of time.
And testing w/list when you have to switch to divs seems like a bit of a waste of time

12

Hi,

In a two column layout you only need to float the first div and then the following element will fill the available space automatically. The problem is that it will also wrap around the float so you simply give the second div a margin-left equal to the width of the float and then you have your two columns. The second column needs no widths and will fill the available space.

However, then we run into the question of what happens when you add clear:both to an element in the second column as it will also clear the first column. This leads us to your question about clearing floats and only floats in the same “block formatting context” are affected when you clear a float.

This page explains the problem and provides the solution.

Float clearing and float containing are different concepts and the clearfix method is a method of containing floats within a parent so that the parent extends around the float. Clearing a float is simply the matter of making content start after a previous floated element in the same block formatting context.

In your page you have floated two colums. One of 15% and one of 75%. That is a fragile way to build a page because as the screen gets smaller your 15% is unlikely to be able to contain the content it holds and content would overlap. You could set a min-width for the 15% column using px but then that would cause your right floated column to drop down when that limit was reached. This would not happen if you used the approach I mentioned above as the second column is not floated and needs no width applied.

These days if only IE8+ support is required you can use display:table and display:table-cell for columns quite nicely but it does then limit you to table concepts and makes it awkward if indeed you do want columns to wrap underneath or wrap around.

One thing for sure, I do have to do a lot of math to figure padding / margin. One trick I got from anothher humane society
site is using an empty div to push over other divs. Frankly this seems better than figuring padding or margins.

That sounds like a bad idea and is not needed.

I may wind up sticking with tables, big deal if the cells have content and not just data.

There is no need in this day and age to revert to tables for anything but tabular data. IE8+ all support the display:table and display:table-cell properties so you can mimic your beloved tables but using divs instead and not lose out on semantics as css implies no semantics on the html.

And real page wont have inline styles, but a stylesheet. I test a lot using inline styles.

Sometimes you may think its easier to test with inline styles but I can guarantee you that it us never easier especially when you need to make multiple changes. Don’t worry, though we’ve all been there and done it ourselves and found out the hard way :slight_smile: There’s a lot to take in at first and you are never going to get it right first time so don’t worry if you make mistakes because that’s how you improve.

13

Thanks, let me say this. I have tryed margins, the problem is the div aligns the content correctly, however if the
next line after divs are just text, alignment is off. Whereas if I add the extra “shim” div to “push” a div over then the text
that follows is properly aligned.
As far as IE8+, no I need older browser support as well.
So far I have tested some random “newer sites” that use a lot of divs on the following:
IE5.5+, FF3.0+, chrome, safari, ie for mac, etc.

The results were: Many of the sites did not display correctly on older IE5.5 and 6.0, but did
display correct on IE8+.

My page that’s linked in this post, http://www.taylorjoneshumane.com/zevents_new3.html displayed correctly on every browser I tested.

However the real page called events.html is still done with tables. I am still learning how to position with
divs, and will try your advice. The link given is just a test page for now.

But I still don’t see a problem with using an empty “spacer” div to make the next div move over some.
Of course I will continue to play with this, try margins again. It just seems a “shim” or “spacer” div fixes everything,
and makes everything align correctly. Margins and padding ruins the alignment of anything after the div.
Of course I’m talking keeping things center. It doesn’t mess up left alignment.

14

Then you are probably doing it incorrectly I’m afraid. You never need to float multiple elements in the way that you have your page laid out and you only need two floated main columns and then stack content in each column as required as in the demo I showed you. You don’t need an empty shim and you shouldn’t be using breaks and empty divs just to make space.

As far as IE8+, no I need older browser support as well.

You can support older browsers with a little more care but there is no need to support anything less than IE6 and indeed most sites are not supporting IE6 at all these days as the usage is less than 0.5%. It makes no sense if you are trying to support those 0.5% of users but ignoring up to 16% of mobile users and indeed tablet users who will be getting a broken display. It’s all about common sense and doing the best you can for the most that you can. There is always a trade off somewhere along the line.

My page that’s linked in this post, http://www.taylorjoneshumane.com/zevents_new3.html displayed correctly on every browser I tested.

It’s actually broken on my screen at wide and small widths in every browser (screenshots attached). It’s not a big issue but don’t design for one size only as you never know what the user may be viewing with. It’s also impossible to navigate with images switched off as you have not supplied and text into the alt attributes of the images you used in the navigation. More users surf with images switched off than there are users of ie6 and 7 so you need to get your priorities correct. Remember search engines don’t see images either and use the alt attribute to find out what the content is about. The only time the alt attribute should be empty is when the image is for decoration only and in those cases the image should really be in the css using the background property and not in the html.

However the real page called events.html is still done with tables. I am still learning how to position with
divs, and will try your advice. The link given is just a test page for now.

Ok, but still try not to use inline styles as there is no easy way for us to offer fixes without coding the whole page again. If you had used external css then we could just adjust the css for you.

But I still don’t see a problem with using an empty “spacer” div to make the next div move over some.
Of course I will continue to play with this, try margins again. It just seems a “shim” or “spacer” div fixes everything,
and makes everything align correctly. Margins and padding ruins the alignment of anything after the div.
Of course I’m talking keeping things center. It doesn’t mess up left alignment.

There are very few occasions where an empty shim div is needed and these are usually for complicated layouts and every good developer tries to avoid non semantic elements where possible. It’s not always possible but that should be your goal. You start with a semantic and logical html structure that describes the content you are presenting and then you style it with css. You don’t use html to make presentation.

Take a look at some other sites and see how they are styling and controlling the display. Without wishing to cause offence your page does look a bit like something from 1990 and bares all the trademarks of 1990s design and techniques. There is nothing wrong with keeping it simple and I’m the worst one to talk about design aspects but you do need to consolidate the design into something more coherent.

There’s a lot to take in at first so don’t get disheartened but at the same time don’t get entrenched into old school habits otherwise you will find it hard to progress.

15

seriously take a quick look at this.

they are all pretty short but very clear and informative i think you’ll like them.

as for older browsers support. I am dealing w/that as well and on the learning curve. you could try css3pie, normalize.css, modrnizer (i might be spelling some of them wrong) they might help.

16

While I understand you really wanted to just clear a float, i think that in this case float clearing would not permanently achieve what you want.
this site layout is amazingly simple and a great opportunity for you to learn ce nuances of proper mark up and CSS ( a chance like this may never come again!).

In the hopes that you can reverse engineer what I did, and to serve as a study guide … I reconstructed MOST of your page…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
				html, body {background:url('images/cookybor2.jpg') repeat-y 0 0 #d4b294;margin: 0; padding:0;}
				body {background:url('images/cookybor1.jpg') repeat-y 100% 0 ; padding: 0 123px; min-width: 960px}
				 h3, h2 , h1 { text-align: center;  margin:0; padding:0;}
				.wrap{width:800px; padding-left:160px; margin:0 auto;  }
				.nav {margin: 0; padding:0; list-style: none; width: 160px; float: left; margin-left: -100%;}
				.nav a {display: block; width: 120px; height: 60px; overflow: hidden; text-align: center}
				.nav a[href="donate.html"]:before {content:url(images/cookydonate.gif); }
				.nav a[href="adopt.html"]:before {content:url(images/cookyadopt.gif); }
				.nav a[href="index.html"]:before {content:url(images/cookyhome.gif);} 
				/* add the other menu items, changing only  what is inside the "" and image url as needed*/
				.events h1 {height:100px; overflow: hidden;  }
				.events h1:before{content: url('images/cookyevents2.gif'); margin:0 auto; display: block;}
				.content {float: left; width:100%; margin-right: -160px;}
				.imgshell{ padding-left: 80px   ; text-align: center; margin:0 100px}
				.imgshell>img,  .imgshell>span{    vertical-align: top; margin-bottom:1em; width:50%;   margin-left:-80px; display:inline-block;}
				.bordered img{border:10px solid #d0a070;}
				.imgshell>span {text-align: center}
				.imgshell>span img {display: block; margin-bottom: .5em}
				.imgshell>img:nth-child(2n),.imgshell>span:nth-child(2n)  {    margin-left:30px}
				.foot {clear: both; text-align: center}
				.story + .story { padding-top:  70px; background: url(images/cookydiv.jpg) no-repeat 50% 10px; margin-top:1em}
		</style>
	</head>
	<body>
		<div class='wrap events'>
				<div class='content'>
				<h1>Events</h1>
				<h2>Past Events:</h2>
				<div class='story'>
					<h3>On Saturday April 13, 2013</h3>
					<p> A group of McMurry students gave back to the community by washing windows and socializing with the animals at the Taylor Jones Humane Society.</p>
					<p>Students that helped are Leah Morgan, Alyssa Fields,Nic Alvarez, Shelbi Hobbs,Barbara John, Randi Hanfield, Stacey Norton, Courtney Norton,Makenzie, Storie and Cameron Wallace.</p>
					<p >Thank you students for your help!</p>
					<div class='imgshell bordered'>
						<img src="images/imgevent/window2.jpg" alt="some description SHOULD go here" width="250" height="254"  />
						<img src="images/imgevent/window1.jpg" alt="" width="250" height="196"  />
						<img src="images/imgevent/willow7.jpg" width="248" height="308" alt="" />
						<img src="images/imgevent/vinwil7.jpg" width="232" height="309" alt="" />
						<img src="images/imgevent/window4.jpg" width="250" height="279" alt=""  />
					<!-- imgshell --></div>  
  				<!-- story --></div>
				<div class='story'>
 					<p>Thanks to all who came by and donated and adopted at the Adoption Event that was heldSaturday March 23rd, 2013 from 1:00 pm til 5:00 pm
at &quot;pet friendly&quot; Timber Ridge Apartments3602 Rolling Green Drive.</p>
					<p>Members from other apartment complexesalso  attended.Donations of pet food and other wish list items
					from our website were accepted.We also had some adoptions.</p>
   				<!-- story --></div>
				<div class='story'>
					<h3>Our Photo's with Santa:</h3>
					<p> Held on Saturday Dec 15, 2012 at Mankin & Sons Gardens
4002 N. 1st Was a huge success. Thanks to everyone
who came in for photos.</p>
					<p>Here's some samples from the event:</p>
 					<div class='imgshell'>
						<img src="images/imgevent/window2.jpg" alt="" width="250" height="254"  />
						<img src="images/imgevent/window1.jpg" alt="" width="250" height="196"  />
						<img src="images/imgevent/willow7.jpg" width="248" height="308" alt="" />
						<img src="images/imgevent/vinwil7.jpg" width="232" height="309" alt="" />
 					<!-- imgshell --></div>  
  				<!-- story --></div>
				<div class='story'>
					<h3>Other contentent:</h3>
					<p> Held on Saturday Dec 15, 2012 at Mankin & Sons Gardens
4002 N. 1st Was a huge success. Thanks to everyone
who came in for photos.</p>
					<p>Here's some samples from the event:</p>
 					<div class='imgshell'>
						<span><img src="images/imgevent/window2.jpg" alt="" width="250" height="254"  /> sample caption</span>
						<span><img src="images/imgevent/window2.jpg" alt="" width="250" height="254"  /> sample caption</span>
						<span><img src="images/imgevent/window2.jpg" alt="" width="250" height="254"  /> sample caption</span>
						<span><img src="images/imgevent/window2.jpg" alt="" width="250" height="254"  /> sample caption</span>
   					<!-- imgshell --></div>
   				<!-- story --></div>
				<!-- content --></div>
				<ul class='nav'>
					<li><a href="index.html">Home</a></li>
					<li><a href="adopt.html">Adopt</a></li>
					<li><a href="donate.html">Donate</a></li>
					<li><a href="volunteer.html">Volunteer</a></li>
					<li><a href="history.html">History</a></li>
					<li><a href="safety.html">Safety</a></li>
					<li><a href="overpop.html">Overpopulation</a></li>
					<li><a href="memorial.html">Memorial</a></li>
					<li><a href="honor.html">Honor</a></li>
					<li><a href="support.html">Support</a></li>
					<li><a href="links.html">Links</a></li>
					<li><a href="awards.html">Awards</a></li>
					<li><a href="mailto:tjhs@wtconnect.com">Contact</a></li>
				</ul>
				<div class='foot'>
	         		<span>Webpage Maintenance by <a href="mailto:tjhs@wtconnect.com">Jimmie and Diane</a>
	        		<br /><span>of the Taylor Jones Humane Society</span>
	        		<br /><span>Page design by <a href="mailto:ndrebbel@hotmail.com">Bekki</a></span> 
	       			<br /><span>Copyright © 2000-2012 All Rights Reserved.</span>
					<br /><span>This page last updated on 9/27/12</span>       
 				</div>
		</div>

	</body>
</html>

you can see that I avoided inline styles, they are a trap, even for debugging.
I also made use of semantic wrappers ( .story, .imageshell) for easy targeting.

with minor changes to the CSS, you could use the same code throughout the entire site, thus saving you hrs if not days in maintenance time

17

Thank you for this. I have taken into advise using margins. Also I had to add min-width. This is before I saw the above post.
Believe me I am going to study it, and learn from it.