максимальная ширина с процентом не работает ни в IE 8, ни в Firefox 3. Определенная ширина пикселя работает нормально. Я что-то упустил?
У меня есть форма ввода, и я хочу отобразить пояснительный текст справа от нее. Но я не хочу, чтобы пояснительный текст давил форму.
Я не использовал max-width прежде, но это казалось отличным решением. Я написал этот простой стиль CSS:
div.hint {max-width: 50%; float: right;}
Тогда я написал:
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...
div.hint строго сдавливает форму влево.
Я попробовал это, используя только текст вместо формы. Div.hint занимает около 95% экрана, просто оставляет небольшое поле слева, а затем другой текст полностью помещается под ним.
Если я изменю максимальную ширину с процента на фиксированное количество пикселей, он, похоже, будет работать. Но я не хочу основывать его на пикселях, потому что я не знаю размеров браузера пользователя.
Процент не работает с max-width несмотря на то, что я прочитал в документации, или я что-то упустил?
В ответ на комментарий Шенмонстера: здесь я приведу тривиальную, но полную веб-страницу, которая иллюстрирует то, что, по моему мнению, должно работать, но не:
<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>
Когда я открываю эту страницу в браузере, я получаю не два столбца, а div "hint", принимающий 100% ширины, а ниже этого div "form", принимающий 100% ширины. Если я изменю max-width на «width: 50%», я получу два столбца, как и ожидалось. Очевидно, я что-то упускаю из-за того, как должна работать max-width, но ... я не понимаю.