Menu
max-width with a percent doesn't seem to work in either IE 8 or Firefox 3. Specific pixel widths work fine. Am I missing something?
I have an input form, and I want to display some explanatory text to the right of it. But I don't want the explanatory text to squash the form.
I haven't used max-width before but it seemed an excellent solution. I wrote this simple CSS style:
div.hint {max-width: 50%; float: right;}
Then I wrote:
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...
The div.hint squashes the form severely to the left.
I tried this with just some text instead of the form. The div.hint takes about 95% of the screen, just gives a small margin on the left, and then the other text is pushed completely below it.
If I change the max-width from a percent to a fixed number of pixels, it appears to work. But I don't want to base it on pixels because I don't know the dimensions of the user's browser.
Does percent not work with max-width despite what I read in documentation, or am I missing something?
In response to Seanmonster's comment: Here, I'll give a trivial but complete web page that illustrates what I thought should work but doesn't:
<html><title>Max width test</title>
<style>
.form {max-width: 75%; float: left;}
.hint {max-width: 50%; float: right;}
</style>
<div class=hint>
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc.
</div>
<div class=form>
<table>
<tr><th>Label 1 <td>Value 1
<tr><th>Label 2 <td>Value 2
<tr><th>Label 3 <td>Value 3
</table>
</div>
</html>
When I open this page in a browser, I get, not two columns, but the "hint" div taking 100% of the width, and below that the "form" div taking 100% of the width. If I change both the max-width's to "width: 50%", I get two columns as I would expect. Apparently I'm missing something about how max-width is supposed to work, but ... I don't get it.
737
Max-width works perfectly fine in FF3 and IE8 with percentages. Percentages, however, are based off the parent width. Not children around it.
129
max-width on IE8 is buggy under multiple scenarios. It is a known issue.
You can find an article on it here. http://edskes.net/ie8overflowandexpandingboxbugs.htm
You need three things to trigger this bug - maxwidth, scrollbars, and float
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
