Floated div tags print wrong on 2nd page

The attached example looks as it should when viewed in both IE and FF.  But when the page is printed (or a print preview), the first page looks fine, but the content on the second page has the div's jumbled.  It only happens when there is enough content to force a second page.
Is this something in my code, or some weird browser bug?
I've included my source code, but you can also see this at:
http://www.surveystar.com/test/test_checkbox.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Survey</title>
</head>
 
<body>
<form>
 
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
<div style="clear:both"></div>
<div style="float:left; width:7%;">testing</div>
<div style="float:left; width:3%;"><input type="checkbox" name="x1" value="1" /></div>
<div style="float:left; width:80%;">row text goes here...</div>
 
</form>
</body>
</html>

Open in new window

datastarstarAsked:
Who is Participating?
 
hankknightCommented:
You asked if my adage to avoid using percent with floats was documented.  No. It does not break any rules, it is just a bad idea.   The reason is because 12% must be relative to something (usually the body or the div that an object is in). When you float things, the actual width of that object may be subject to change.  Also, width is not always strictly adhered to.  So I prefer to use em because em will allow for the space of 10 M characters (the largest character). Using em gives your the cross browser and screen resolution advantages without the limitations of using px.

<div style="width: 10em"></div>

But if the code works with the percents you can leave them.  

You are right, it was actually 100% width that I added that solved the problem.  Without that, the objects that are floated can forget the width of their parent....

You asked if the extra <div> is even necessary.  It is there for very old browsers.
0
 
hankknightCommented:
If you are using "float: left" then you should NOT define width as a percent.

Either define the width using px or em or do not define the width at all.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Survey</title>
 
<style type="text/css">
.tab1{
 clear: left;
 float:left;
}
 
.tab2{
 float:left;
}
 
.tab3{
 float:left;
}
 
.clear {
 height: 1px;
 width: 100%;
 clear: both;
 overflow: hidden;
}
 
#content {
 padding: 0;
 margin: 0;
 line-height: 1.7em;
}
</style>
 
</head>
<body>
<div id="content">
<form action="/">
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
<div class="clear"></div>
<div class="tab1">testing</div>
<div class="tab2"><input type="checkbox" name="x1" value="1" /></div>
<div class="tab3">row text goes here...</div>
</form>
</div>
</body>
</html>

Open in new window

0
 
datastarstarAuthor Commented:
Thanks Hank.  Playing around with this some more, it looks like it wasn't the removal of the percent widths which fixed the printing problem, it was the addition of the 100% width you added on the clearing <div>'s.  I'm not sure why the extra <div> is even necessary.  With the clear:left you added on "tab1" shouldn't this wrap the next set properly (it doesn't without the "clear" div)?

>>If you are using "float: left" then you should NOT define width as a percent.
Is this documented anywhere?  I'd like to use the percents because in my actual content, I want to be sure the divs all align, regardless of length of text.  Don't want to use pixel widths to better render on different screen sizes/resolutions.



0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.