Forum Moderators: not2easy
Basically, I want the left column to have it's width based on content, which will only be fairly short, menu links.
<html>
<head>
<title>My CSS Test</title>
<style TYPE="text/css">
#menu { background:#cccccc; float: left; width: auto; }
</STYLE>
</head>
<body>
<div id=menu>
Menu Item<br>
a long menu item<br>
</div>
<div>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
</div>
</body>
</html>
But, of course, when 'more stuff' extends below the menu div, it wraps underneath it.
Stuff I've been playing with to make it work better...
An attempt to solve this might involve:
#menu { background:#cccccc; float: left; height: 100em; width: auto; }
But, of course, 'height: 100em;' would largely be arbitrary, unless there was a way to detect the height of the 'more stuff' div and set it accordingly.
Another method to solve the problem, involved:
#menu { background:#cccccc; float: left; width: auto; }
AND
<div>
<table
<tr><td>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
</td></tr>
</table>
</div>
Basically, creating a single table for the right column. This would, again, work better if there was a way to know the height of the table and then be able to set the height of the menu div accordingly.
Any other ideas?
Any obvious, insurmountable, problems with the solutions to what I mentioned above that I didn't already cover?
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).
[w3.org...]
If you don't set the width for the float, the results will be unpredictable across different browsers. When I tried it, mozilla and opera behaved nicely (though differently) and ie6 made the float fill the whole page.
I think a float is the right idea for the wrap that you want, but I think you're going to have to give it a width. I would try to style my menu items so that they could wrap gracefully.
Adam
<edit>homonyms</edit>
I could do it with tables, but I was hoping to use CSS.
