Forum Moderators: not2easy
Code I have is
#wrapper { width: 100%; height: 100%; overflow: auto; }
.left { height: 100%; }
.right { float: right; width: 150px; height: 100%; }DIV { border: 1px solid red; } /* Just so I can see them */
<div id='wrapper'>
<div class='right'>Stuff</div>
<div class='left'>Nonsense</div>
</div>
The right hand div is fine, but the left is only as wide as the content, like it's floated left but it's not! Both are full height though.
The right hand div is fine, but the left is only as wide as the content, like it’s floated left but it’s not! Both are full height though.
I tested your code, and using the following doctypes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">The left-hand side was as wide as the space allowed. I suspect though, seeing as you say the height filled what you wanted, that you’re pushing IE into quirks mode, and you never tested it in Firefox (though even when forcing IE into quirks mode myself, I didn’t find any problem with the left-hand side only taking up its necessary space.)
I’m guessing there’s other code messing with it? Did you accidentally have absolute positioning on the left-hand side, or are floating it? These would both account for it only taking up necessary space, rather than all available space.
I think the reason you’re having so many problems (I read the post about tableless layouts) is because your processes are a little muddled. Why don’t you try to:
<?xmltext/html
because your processes are a little muddled
Yes, I know the theory (or most of it I think) but putting it into practise is a lot harder as I'm sure you know. I am relatively new to CSS layouts as I haven't been doing commercial websites long.
Use a full and correct doctype
Sorry I didn't mention this, I always use strict and will soon start XHTML.
Test in a standards-compliant browser. Take your pick, but I find the one with the least errors is still Firefox
I usually run IE7 and FF next to each other so do both at once.
I'm glad that this should work, that means I have the theory right at least. I think there's maybe some other bit of CSS messing with it causing a float or something, I'll check but thanks for the advice guys.
I always use strict and will soon start XHTML
<!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:utf-8">
<title></title>
<style type="text/css">
#wrapper { width: 100%; height: 100%; overflow: auto; }
.left { height: 100%; }
.right { float: right; width: 150px; height: 100%; }
DIV { border: 1px solid red; } /* Just so I can see them */
</style>
</head>
<body>
<div id='wrapper'>
<div class='right'>Stuff</div>
<div class='left'>Nonsense</div>
</div>
</body>
</html>
Note, the left column takes up the remaining width, but the height's are not 100%. That's because in order for 100% to be calculated, the parent height has to be known. So below is an updated example in which I've given html and body a height of 100% as well. I've also removed the borders and replaced them with different background colors on the two blocks (since adding a border screws up the height calculation).
<!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:utf-8">
<title></title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#wrapper { width: 100%; height: 100%; overflow: auto; }
.left { height: 100%; background-color: #c00;}
.right { float: right; width: 150px; height: 100%; background-color: #00c;}
</style>
</head>
<body>
<div id='wrapper'>
<div class='right'>Stuff</div>
<div class='left'>Nonsense</div>
</div>
</body>
</html>
Note, the height is correct and the widths do not seem to be shrink wrapping in either IE6 or Firefox. So perhaps you have other styles on your page that are affecting what you're seeing?
Can anyone actually provide an example of a browser that can't handle XHTML with text/html?
As I run my own servers I can soon change the mime-type if I need to, but I've never seen a broken XHTML site.
Anyone else seen one?
I can't be bothered to read all of it
Ha! That's a good one. If you are considering serving your documents as XHTML, then you definately SHOULD read all of it. It's not a black or white issue. There are several points of interest, including a reference to the Mozilla Web Author FAQ which states:
Serving valid HTML 4.01 as text/html ensures the widest browser and search engine support.
I can't be bothered to read all of it
I realise the irony of this given the current ongoing thread! Easier to cope with if you read as you go along though.
Serving valid HTML 4.01 as text/html ensures the widest browser and search engine support
I did note that one. I will read the other article when I decide to have a look in more detail, but still.......can you find an example of some broken XHTML though?
I did have html and body set to 100% too, so that was ok.
Thanks for the help.
