[RESOLVED] CSS left / right float - content not aligned

**BillGeek** · Feb 23rd, 2009, 01:16 AM

I have a page that displays a 100px column on the left and right hand side, with the content inbetween. The problem I face is that, if the content exceeds the height of the column on the left / right, then the content is not aligned properly. (See below screenshot)

Is there any way to have this displaying correctly? From what I can tell, if I set the content DIV's height property the same to the height property of the LEFT / RIGHT DIV's, then it displays properly. Obviously this isn't an option, seeing as the window will be a different size for every person browsing the site.

The page:

Code:

<html>
	<head>
		<title>Test Page</title>
		<style type='text/css'>
			body
			{
				font-family:Arial;
				font-size:8pt;
			}
			div.content
			{
				margin-left:100px;
				margin-right:100px;
			}
			div.left
			{
				width:90px;
				float:left;
				border-right:1px solid #000;
			}
			div.right
			{
				width:90px;
				float:right;
				border-left:1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class='left'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
		<div class='right'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
		<div class='content'>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div>
	</body>
</html>

**coothead** · Feb 23rd, 2009, 04:10 AM

Hi there BillGeek,

your problem is caused by the lack of of a full dtd which puts IE browsers into Quirks Mode.
If you made use of the validator...

http://validator.w3.org/

...to check your coding, it would have told you about it.

Here is you validated page...

Code:


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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Test Page</title>

<style type="text/css">
body {
    font-family:arial;
    font-size:8pt;
 }
div.content {
    margin-left:100px;
    margin-right:100px;
    text-align:justify;
 }
div.left {
    width:81px;
    padding-right:9px;
    float:left;
    border-right:1px solid #000;
 }
div.right {
    width:81px;
    padding-left:9px;
    float:right;
    border-left:1px solid #000;
 }
</style>

</head>
<body>

<div class='left'>
a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a 
</div>

<div class='right'>
a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a 
</div>

<div class='content'>
<p>
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.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p><p>
Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. *** sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
</p>
</div>

</body>
</html>

**BillGeek** · Feb 23rd, 2009, 05:03 AM

I'm aware of the dtd, just didn't include it in this test page, as this problem happens irrespective of whether I've added a DTD or not. It's worth noting that this only happens in IE.

**coothead** · Feb 23rd, 2009, 05:55 AM

Hi there BillGeek,

...this problem happens irrespective of whether I've added a DTD or not...

Well, I beg to disagree.

The attached image shows my test of your code.

**BillGeek** · Feb 23rd, 2009, 06:55 AM

What happens when you create an HTML file from the code that you provided above?

**coothead** · Feb 23rd, 2009, 07:08 AM

Hi there BillGeek,

I am sorry but I do not really understand your question.

I used your code for my tests it was, obviously, an html file.

All that I have done is add a full dtd to your code, to produce the image to the right.

**Nightwalker83** · Feb 24th, 2009, 12:02 AM

@ coothead,

make sure your doctype is set XHTML 1.0 not the redundant HTML 4.01. XHTML = from 1999 onwards.

Edit:

You can enable Dream Weaver to automatically add the "XHTML 1.0" doctype to a page rather than the "HTML 4.01" doctype.

**coothead** · Feb 24th, 2009, 03:23 AM

Hi there Nightwalker83,

...make sure your doctype is set XHTML 1.0 not the redundant HTML 4.01. XHTML....

You cannot be serious.

You're better off not pretending that this is XHTML, really.
If you're serving it as "text/html" then it is, for all practical purposes, HTML, not XHTML.

Beware of XHTML

You can enable Dream Weaver...

You cannot be serious.

**Nightwalker83** · Feb 24th, 2009, 04:17 AM

Originally Posted by coothead

Hi there Nightwalker83,

You cannot be serious.

Yes, I am serious! Better coding practices.

Edit:

http://www.w3schools.com/XHTML/xhtml_html.asp

**coothead** · Feb 24th, 2009, 05:40 AM

Hi there Nightwalker83,

Yes, I am serious! Better coding practices.

Then I would suggest that you seriously read the article that I gave you in my previous post....

Beware of XHTML!!!

If you're serving it as "text/html" then it is, for all practical purposes, HTML, not XHTML.

**Nightwalker83** · Feb 24th, 2009, 06:29 AM

Originally Posted by coothead

Hi there Nightwalker83,

Then I would suggest that you seriously read the article that I gave you in my previous post....

I have studied XHTML during my web development course and that article you posted is really interesting. I wasn't aware of it before.

**coothead** · Feb 24th, 2009, 07:11 AM

Hi there Nightwalker83,

so I can safely assume that you will be using this...

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

...for your future documents.

**Nightwalker83** · Feb 24th, 2009, 06:47 PM

Originally Posted by coothead

Hi there Nightwalker83,

so I can safely assume that you will be using this...

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

...for your future documents.

I don't think so! My course has been using xhtml and I don't know if the lecturers allow us to use html anymore.

**BillGeek** · Feb 24th, 2009, 11:56 PM

Originally Posted by coothead

Hi there BillGeek,

I am sorry but I do not really understand your question.

I used your code for my tests it was, obviously, an html file.

All that I have done is add a full dtd to your code, to produce the image to the right.

What I meant was:

I reckon that this has something to do with <p> tags. The page that I provided as an example had no paragraphs. If you create two seperate paragraphs from my test page with a DTD, does this problem still occur on your side?

**Nightwalker83** · Feb 25th, 2009, 12:16 AM

Originally Posted by BillGeek

does this problem still occur on your side?

I get the same look as the picture you posted in post #1 when using your original code in IE 6:

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">
<title>Test Page</title>
		<style type='text/css'>
			body
			{
				font-family:Arial;
				font-size:8pt;
			}
			div.content
			{
				margin-left:100px;
				margin-right:100px;
			}
			div.left
			{
				width:90px;
				float:left;
				border-right:1px solid #000;
			}
			div.right
			{
				width:90px;
				float:right;
				border-left:1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class='left'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
		<div class='right'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
		<div class='content'>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div>
	</body>
</html>

Edit:

Also tried adding <p> tags and "'s and it still gave the same result!

@coothead I tried with both html 4.01 and xhtml 1.0 doctypes and they didn't make a difference.

@ BillGeek

Which version of Internet Explorer are you using?

However, I get this result using the above code in IE 7:

Both tests using IE 6 and IE 7 were at 1024px*768px.

**coothead** · Feb 25th, 2009, 04:12 AM

Hi there gentlemen,

my tests were done in IE 7 and the use of a dtd cured the problem.
I assumed, wrongly, that this would be the case for IE 6 also.

Although, the dtd addition did work for IE 7, the real cure for both browsers seems to be to add..

zoom:1;

...here...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Test Page</title>

<style type="text/css">
body {
    font-family:arial;
    font-size:8pt;
 }
div.content {
    margin-left:100px;
    margin-right:100px;
    zoom:1;
 }
div.left {
    width:81px;
    padding-right:9px;
    float:left;
    border-right:1px solid #000;
 }
div.right {
    width:81px;
    padding-left:9px;
    float:right;
    border-left:1px solid #000;
 }
</style>

<!--[if lt IE 8]>
<style type="text/css">
div.content {
    zoom:1;
 }
</style>
<![endif]-->

</head>
<body>
<div class='left'>
a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a 
</div>
<div class='right'>
a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a 
</div>
<div class='content'>
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
</div>
	
</body>
</html>

Further reading:-

**BillGeek** · Feb 25th, 2009, 05:10 AM

Originally Posted by nightwalker87

@ BillGeek:Which version of Internet Explorer are you using?

I'm using v6.

Originally Posted by coothead

to add..

zoom:1;

This solved my problem!

Thanks!

**coothead** · Feb 25th, 2009, 05:50 AM

No problem, you're very welcome.

Thread: [RESOLVED] CSS left / right float - content not aligned

Thread Tools

Display

[RESOLVED] CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Re: CSS left / right float - content not aligned

Posting Permissions