It's a really tricky one ... an approach you could try would be inline-block -- this isn't supported in Firefox however you can use the -moz-inline-box value:
CODE
<html>
<head>
<title>CSS 2 COLUMn LAYOUT TUTORIAL</title>
<style type="text/css">
#container {
width:600px;
vertical-align:middle;
}
#left,#main {
display:-moz-inline-box;
_display:inline-block;
}
#left {
width:200px;
}
#main {
width:400px;
}
</style>
</head>
<body>
<div id="container">
<div id="left" style="background:yellow;float:left;text-align:center; ">
this is the left column
</div>
<div id="main" style="background:blue;float:left;">
this is right column<br/>
hello
hello
</div>
</div>
</body>
</html>
[/quote]
Note the inline blocks/boxes/whatever the browsers want to call them, are very unpredictable! If you had a lot of stuff in your columns they might go very strange.
Also note the vertical-align attribute has to be on the
outer container; it specifies how items sit on the line inside it, in this case we want them to middle align with each other
vertical align is quite confusing in this regard, and may even seem a little backward...
I've also used an _ underscore for implementing an IE-only hack, however there are better hacks available. I would normally put IE rules in a separate file using conditional comments, so I don't know any better hacks offhand
29 Sep, 2007 - 04:03 AM
| 