Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS max-width with percent

Tags:

html

css

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.

like image 737
Jay Avatar asked Oct 04 '09 21:10

Jay


2 Answers

Max-width works perfectly fine in FF3 and IE8 with percentages. Percentages, however, are based off the parent width. Not children around it.

like image 129
seanmonstar Avatar answered Sep 22 '22 12:09

seanmonstar


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

like image 25
diadem Avatar answered Sep 18 '22 12:09

diadem