CODEWITHSUNDEEP
htmlcss
Jay
Jay

Reputation: 27512

CSS max-width with percent

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.

Upvotes: 15

Views: 39009

Answers (3)

diadem
diadem

Reputation: 854

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

Upvotes: 5

CMN
CMN

Reputation: 279

If you were to float the div.hint and form both to the left and have them both with a max-width of 50%, they shouldn't squish each other.

<div>
  <div class="form" style="float:left; max-width:50%">
    <form></form>
  </div>
  <div class="hint" style="float:left; max-width:50%">
  </div>
</div>

Upvotes: 2

seanmonstar
seanmonstar

Reputation: 11452

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

Upvotes: 6

Related Questions