Learn VBA & Macros in 1 Week!

CSS - Clearing Floats/liquid Height Div Problem

Full Excel VBA Course - Beginner to Expert

Clearing Floats/liquid Height Div Problem	View Content

So...

I've got a page I'm working on where I can't seem to get to floats to clear without compromising the layout of the divs that are floating.

http://www1.romenews-tribune.com/multimedia2/
http://www1.romenews-tribune.com/multimedia2/style.css

If I try the clear:after class fix, it doesn't work. If I try the overflow: hidden fix, it looks fine until the page is resized - and the overflowing content is hidden.

What I want is for the right and left div is to stretch to the bottom of the page regardless of the page height, and clear to the div they are floating in.

Any suggestions? Let me know if I need to provide better examples or more info, as I'm stumped on this one and feel like I've been doing this for far too long.

Full Excel VBA Course - Beginner to Expert

Problem Clearing Floats For Footer

Similar Tutorials

View Content

I know this is probably something very simple I'm overlooking, but I can't seem to get this page to display corrrectly in IE. The portion I'm talking about is the footer div: although the CSS clears both, in Firefox I see the footer correctly but in IE there is some encroachment of the footer background color on the right side of the screen.

URL is: http://www.readaloudproject.org/about/

Please disregard all of the other aspects of the page... this is very much still under construction and a lot more styling needs to be done. But this footer is driving me crazy because I copied working code from other sites that is now no longer working.

Help! Thanks!

Clearing Floats Inside Of Floats

Similar Tutorials

View Content

I have floating items inside of floating items. The problem is I cannot clear my floating items in the middle column because that ruins the other columns.

How can I clear floats in the middle column?

Do you have any better ideas to make my layout work?

I have attached in image of how the layout should work.

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>
<title>Title</title>
<style type="text/css">

#content {
display: block;
margin: 0 5px;
padding: 0 10px;
border-top: 1px solid #0B4867;
}

.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .25%;
display: inline;
background: #ffeeee;
}

.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}

.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}

</style>
</head>
<body>
<div id="content">

<div style="margin: 0px 215px; padding: 0px; border: 0px; display: block;">

<div class="content100">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra malesuada turpis. Sed iaculis justo sed turpis. Nulla malesuada turpis sed nibh. Mauris dui quam, cursus at, sollicitudin a, auctor quis, ligula. Vivamus varius blandit velit. Sed eu nibh. Vestibulum sit amet massa. Maecenas elementum massa ac ligula. In vitae massa ut dui facilisis lacinia. Maecenas tristique pede in elit. Duis ultricies aliquam metus. Mauris neque. Nunc nec lectus eu metus rhoncus imperdiet. Etiam egestas semper nunc. Nunc pretium tincidunt felis. 
</div>


<div class="content50">
  <h2>Row 1, Column 1</h2>
  In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque. 
</div>

<div class="content50">
  <h2>Row 1, Column 2</h2>
  This column is not very high.
</div>

<div class="content100">
  Donec sed velit mollis erat consequat ornare. Donec accumsan, sapien a posuere tristique, felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris. 
</div>

<div class="content33">
  <h2>Row 2 Column 1</h2>
  Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.  
</div>
<div class="content33">
  <h2>Row 2 Column 2</h2>
  This column is not as high as the previous one.
</div>
<div class="content33">
  <h2>Row 2 Column 3</h2>
</div>

<div class="content100">
  Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante. 
</div>

</div>
</div>

</body>
</html>

Problem With Floats; Get Both Divs At Maximum Height

Similar Tutorials

View Content

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.

Why Are My Floats Not Clearing In Firefox

Similar Tutorials

View Content

Hi

Could someone explain to me why my floats are not clearing at http://www.sussexfind.co.uk/test/

I added a div class at the end of the header div called <div class="clr"> but this does not seem to clear the div in FF.

I tried Pauls technique of adding overflow:auto; to the header div but when viewed in IE5 the grey bar at the top does not butt up with the right hand side of the page, http://www.sussexfind.co.uk/test/index-IE5.htm

I would prefer to use this technique but need assistance in fixing the IE5 problem.!

Thanks for any help!

Footer Not Clearing Floats Ie7 Only Help

Similar Tutorials

View Content

I am working on a new page and have got things working in firefox, but the footer and a couple of other things are not working very well in IE7, can anyone point me in the right direction on where I need to look for the problem, thanks:

the page is at: tinybrandsrock [dot] com

thank you.

Clearing Only Internal Floats

Similar Tutorials

View Content

Is there a way to only clear floats within an element without affecting any floats defined about and outside the element?

example:

<div style="float:left;">A</div>
<div style="float:right;">
<div style="float:left;">C</div>
<div style="clear:both;"></div>
</div>

I would want the clear to only clear C and not A

Multiple Floats And Clearing

Similar Tutorials

View Content

I'm working on a site that has a lot of floated elements, and I'm running into a situation I've run into before with Firefox, where Firefox insists on clearing the floated elements.

I figure it's about time to learn the fix, if there is an easy one.

Here's a very simple test case:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
	.sidebar {float: right; width: 100px; height: 500px; background: green}
	.box {background: orange; float: left}
	.box_right {float: right; background: blue}
</style>


</head>

<body>

<div class="sidebar"></div>
<div class="box">
	<div class="box_right">test</div>
</div>

</body>
</html>

So you've got a tall right side floated element. Then in the content area you've got a float: left that contains a float: right.

I could fix it by removing the float: left, but then the box won't expand with it's floats.

I could fix it by removing float: left and switching to overflow: auto. That would make it expand with it's floats, but I have some absolute positioned layer popups within that box that get cut off if I use overflow: auto. So that's a no go.

I could fix it by setting a width on the float: left, but this is a liquid width site and I want the float: left box to expand the full width (but not touch the sidebar).

Is there a fix for Firefox that would work with the above requirements?

Browser Compatibility/clearing Floats Help!

Similar Tutorials

View Content

Hello,

I'm new to this, hopefully someone can help me out. I recently created a few pages on wordpress for my business. Once I finished (using firefox) I checked to see if my site was compatible with other browser and unfortunately there were several issues. Text, pictures and videos are not aligned properly in Safari, Chrome and IE. Does anyone know what could possibly cause this and how to fix it??

I am also looking for someone to help me in the future for website design, recommendations appreciated.

signature sound .com under "training" and "workshops"

If there is anymore information needed to help me I will provide.

extra info:
I cleared floats within HTML and not within CSS.

Here is some CSS for the training page:

#song-logo {
margin:35px 0px 0px 44px;
}

#discover-songlist1 {
margin:0px 40px 0 50px;
float:left;
}

#discover-info {
float:left;
width:500px;
margin:-36px 0px 0px 130px;
}

#song-pictures {
margin:-65px 48px 0px 0px;
}

#more-info {
margin: -30px 0px 0px 45px
}

#record-logo {
margin:55px 0px 0px 44px;
}

#discover-recordlist2 {
margin:0 143px 0 50px;
float:left;
}

#discover-every {
width:500px;
float:left;
margin:-36px 0px 0px 62px;
}

#record-pictures {
margin:-65px 55px 0px 0px;
}

#more-info2 {
margin: -30px 0px 0px 45px
}

#discover-list3 {
width:460px;
float:left;
margin:50px 0 0 50px;
}

Liquid Height Div

Similar Tutorials

View Content

Hi,

Basically, this is one of my site pages:
http://www.zombiemod.com/rm/nina2/about.html

I want the white box in the middle to auto expand its height so it fills the vertical height of the page. Ive tried setting its height to 100% but that doesnt seem to work.

This is my CSS for the white space:
Code:

#frame {
    position: relative;
    padding: 2px 15px 20px;
/*  background-color: #000;*/

    color: #000000;
height: 410px;
}

Can anyone help me with this? Im not great with this stuff, so I just want the easiest way possible, whether it is javascript or css.

How To Make Div Colums To Liquid Height

Similar Tutorials

View Content

I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height?

Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box?

jarsandmixes.com/liquid.php

body {
background-color: #FFF7EF;
}

div {
text-align:center;
}

div#wrapper {
background-color: transparent;
border:0px solid black;
margin:0px auto;
text-align:left;
position:relative;
width:100%;
height:100%;
min-height:100%;
}

div#border {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:10px;
}

div#page {
background-color: #DEC6B5;
border:1px dashed black;
position:relative;
clear:both;
float:left;
width:100%;
height:100%;
min-height:100%;
padding-bottom: 10px;
overflow:hidden;
}

div#header {
background-image: url(images/.gif);
background-repeat: no-repeat;
border:1px dashed black;
margin:0px;
padding:0px;
width:100%;
height:80px;
}

div#menu {
clear: both;
background-color: #CA7B93;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

div#left1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
float:left;
margin:5px;
width:20%;
height:auto;
}

div#left2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#content1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
margin:5px auto;
width:54%;
height:auto;
}

div#content2 {
background-color: #DEC6B5;
background-image: url(images/bkg3.gif);
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
width:96%;
height:auto;
}

div#divider {
background-image: url(images/.gif);
background-repeat: no-repeat;
margin:10px auto;
width:439px;
height:60px
}

div#right1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
float:right;
border:1px solid black;
margin:5px;
right:10px;
width:20%;
height:auto;
}

div#right2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#footer {
clear: both;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

Liquid Height And 2nd Background Image

Similar Tutorials

View Content

Hey guys, how are you?

So, I got two questions.

Right now, on my main pages I have a fixed height, and wondering the best way to change it to a liquid one, so no matter how long the page is, I get a white background that's consistent with my 'main' <div>.

And the second one, is how do I get a second background image on the body? I'm probably going to use almost almost a mirror type gradient of the top gradient, but not sure how to add it.

You can view the two problems here http://thecheckoutplace.com/ home page).

Thanks for your time, cheers.

Div Not Clearing Wrapper Div When Min Height Applied

Similar Tutorials

View Content

The Old 'getting Floats To Be The Same Height' Issue

Similar Tutorials

View Content

I know this problem has been seen hundreds of times when you have floated columns and you want them to be the same height so that the background graphic is continuous down to the foot of the page. Well, I've got a slight variant on that:

http://216.120.243.161/~h****ins/browse2.php

(if the url doesn't show above it's because the name of the site happens to contain the letters d i c and k next to each other!)

I have 4 columns of floated boxes, (row number varies) and after every four boxes (they are floated to the left) there is a br that clears them, and a new row starts underneath.

My database system would allow the boxes to actually be quite tall if the name was the full 255 characters. So, I don't want to set a height for them, as most would look silly.

I could do a faux-columns style background, but that requires more elements.

Any ideas would be greatly appreciated, but in the end, I may have to use tables (Nooooo...! ;-) )

Thanks,

Watters

How To Make A Div With Floats Inside, Adapt To The Height Of The Heighest Float ?

Similar Tutorials

View Content

I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works.

Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ?

Thanks in advanced.

Float/clear Problem In 2-col Liquid Layout

Similar Tutorials

View Content

Hi all,
I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings.
I've found 2 good solution:
1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu.
2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading.

Similar problem is being solved in this thread, but I didn't found there anything working .

Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css.

Liquid Layout 100 Percent Width Problem

Similar Tutorials

View Content

Hi,

I'm having a problem a liquid layout using 100 percent width. The inner box peeks out side to the right of the containing box (which is 100% width).

I am viewing with firefox. At a resolution of 1024 width. With IE 6 it's very nasty looking (extremely wide).

Can anyone tell me what I need to do or what I'm doing wrong please

I have simplified the page to highlight the problem I'm having a problem on this page http://www.jamesfarrell.eu/fixhtml/search.htm

HTML as follows:
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; charset=ISO-8859-1">
		
		<link href="fixlayout.css" rel="stylesheet" type="text/css"/>
		
		
	</head>
	<body>

		
		
		<div id='wrap'>			
			<div id="content">
				<div class="searchresult1">
					<h3><a href='info.php?id=486'>rent in france</a> (222.00) per week)</h3><a href=info.php?id=486><img src='images/no_image.gif' width='130' height='127' border=0  /></a><p>1 Bedrooms, 0 Bathrooms, House</p><p>s..</p>
					<a href='info.php?id=486'>More details</a>
				</div>
			</div>
		</div>
			
		
		<!-- <div id="goToTop" class="sNav"><p><a href="#content">^ Top</a></p></div> -->

		
		
	</body>
</html>

CSS as follows:
Code:

body {
	color: #333333;
	background-color: white;
	font-size: 12px;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	border:1px solid black;
	width:100%;
	}
	#wrap {
	background: white;
	margin: 0 0 2em 22%;
	
}
#content {
	padding:0;
	border-right: 1px solid #ccc;
	margin-right: 4em; 
	width:97%;
	margin-left:2.75%;
}
div.searchresult1 {
	

	width:800px;
	width: expression(this.width > 400 ? 400: true);
	
	margin-top:20px;
	margin-right:40%;
	border:1px solid #9eceeb;	

}
div.searchresult1:after {
content:".";
display:block;
clear:both;
height: 0; 
visibility: hidden;
}
div.searchresult1{display: inline-block;} 
/* Hides from IE Mac \*/ 
* html 
div.searchresult1{height: 1%;} 
div.searchresult1{display:block;}
 /* End Hack */ 	
 div.searchresult1 h3{
	background: #c0ddea;
	margin:0;
	padding:4px;
	
}
div.searchresult1 h4{
	background: #c0ddea;
	margin:0;
	padding:4px;
	border:1px solid black;
}
div.searchresult1 img {
	margin: 10px;
	float:left;
	border:1px solid black;
}

Problem With Clearing In Ie

Similar Tutorials

View Content

Clearing Problem (i Think?)

Similar Tutorials

View Content

hi,

i have some divs within my container div. I cant get the container to wrap around the content in #contentMain (which is inside of #content.

in IE, the container wraps after the #leftNav (inside the #conent) but FF wraps after the #nav div

does anyone know how I cant sort it? thanks

html PHP Code:
<div id="container">

<div id="header"></div>

<div id="nav">
//topNav
</div>

<div id="content">

<div id="leftNav">
//leftNav
</div>

<div id="contentMain">

//content, links, images and stuff

</div>

</div>
</div>

css PHP Code:
#container {
        margin:0px auto;
        padding: 0;
        width: 760px;
        /*border: 1px solid #666;*/
        background: url(../images/bodyImg.gif) no-repeat top left;
    }

    #header {
        margin:0px auto;
        padding: 0;
        width: 760px;
        height: 100px;
        background: url(../images/header.gif) no-repeat top left;
    }

    #nav {
        width:760px;
        height: 25px;
        padding: 0;
        margin:0;
        background-color: #eee;
     }

    #content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }

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

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }

    .imgMap1 {
        width: 220px;
        position: relative;
        top: 200px;
        left: 30px;
    }

Ff - Clearing Float Problem

Similar Tutorials

View Content

Hey all,
Here is my page: tri-m.com/ENGINEERINGSITE/test.html

The page looks what I want it to look like in IE... but if you open it up in FF you will see what I mean.

If I add my clear float <div class="clear"></div> after .Iimage and .Ifeatures, a large space is placed between .imageFeatures and .IfeatureTEXT.

If I do not add the clear (as in my example... than the floats are not cleared in FF obviously).

I'm not quite sure what to do with this case. I'm not really able to find a similar problem.

If someone could help me out that would be AMAZING!

Thanks everyone.
- Jacenta

Problem Clearing Floated Div

Similar Tutorials

View Content

I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would.

Here is the basic code I have so far: Code:

<html>
<head>
<style type="text/css">
div.box1 { 
	border: 1px solid red;
	background: #afafaf;
	padding: 2px;
	float: left;
}
div.box1 table { 
	float: left;
	border: 1px solid blue;
	margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
   <table>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
   </table>
 </div>
</div>
<h1>Next Text</h1>
</body>
</html>

I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code:

div.box1:after {
	content: 'clear me';
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables?