Databases
StackOverflow2013
Postsdbo
POCSS max-width with percent
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS max-width with percent
    text
    copied!<p>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?</p> <p>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.</p> <p>I haven't used max-width before but it seemed an excellent solution. I wrote this simple CSS style:</p> <pre><code>div.hint {max-width: 50%; float: right;} </code></pre> <p>Then I wrote:</p> <pre><code>&lt;div class=hint&gt;... hint text&lt;/div&gt; &lt;form action=xxx method=post&gt; ... etc ... </code></pre> <p>The div.hint squashes the form severely to the left.</p> <p>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.</p> <p>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.</p> <p>Does percent not work with max-width despite what I read in documentation, or am I missing something?</p> <hr> <p>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:</p> <pre><code>&lt;html&gt;&lt;title&gt;Max width test&lt;/title&gt; &lt;style&gt; .form {max-width: 75%; float: left;} .hint {max-width: 50%; float: right;} &lt;/style&gt; &lt;div class=hint&gt; &lt;p&gt;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. &lt;/div&gt; &lt;div class=form&gt; &lt;table&gt; &lt;tr&gt;&lt;th&gt;Label 1 &lt;td&gt;Value 1 &lt;tr&gt;&lt;th&gt;Label 2 &lt;td&gt;Value 2 &lt;tr&gt;&lt;th&gt;Label 3 &lt;td&gt;Value 3 &lt;/table&gt; &lt;/div&gt; &lt;/html&gt; </code></pre> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload