1 Attachment(s)
[RESOLVED] CSS left / right float - content not aligned
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>
Re: CSS left / right float - content not aligned
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...
...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>
1 Attachment(s)
Re: CSS left / right float - content not aligned
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.
1 Attachment(s)
Re: CSS left / right float - content not aligned
Hi there BillGeek,
Quote:
...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.
Re: CSS left / right float - content not aligned
What happens when you create an HTML file from the code that you provided above?
Re: CSS left / right float - content not aligned
Hi there BillGeek,
I am sorry but I do not really understand your question. :confused:
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. :D
Re: CSS left / right float - content not aligned
@ 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.
Re: CSS left / right float - content not aligned
Hi there Nightwalker83,
Quote:
...make sure your doctype is set XHTML 1.0 not the redundant HTML 4.01. XHTML....
You cannot be serious. :confused:
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
Quote:
You can enable Dream Weaver...
You cannot be serious. :confused:
Re: CSS left / right float - content not aligned
Quote:
Originally Posted by coothead
Hi there Nightwalker83,
You cannot be serious. :confused:
Yes, I am serious! Better coding practices. :)
Edit:
http://www.w3schools.com/XHTML/xhtml_html.asp
Re: CSS left / right float - content not aligned
Hi there Nightwalker83,
Quote:
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....
If you're serving it as "text/html" then it is, for all practical purposes, HTML, not XHTML.
Re: CSS left / right float - content not aligned
Quote:
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.
Re: CSS left / right float - content not aligned
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. ;)
Re: CSS left / right float - content not aligned
Quote:
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.
Re: CSS left / right float - content not aligned
Quote:
Originally Posted by coothead
Hi there BillGeek,
I am sorry but I do not really understand your question. :confused:
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. :D
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?
1 Attachment(s)
Re: CSS left / right float - content not aligned
Quote:
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.
Re: CSS left / right float - content not aligned
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. :o :o
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:-
Re: CSS left / right float - content not aligned
Quote:
Originally Posted by nightwalker87
@ BillGeek:Which version of Internet Explorer are you using?
I'm using v6.
Quote:
Originally Posted by coothead
to add..
zoom:1;
This solved my problem! :) Thanks!
Re: CSS left / right float - content not aligned
No problem, you're very welcome. ;)
