Databases
StackOverflow2013
Postsdbo
POHTML: Fill available width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML: Fill available width
    text
    copied!<p>What I'm trying to do is this:</p> <p><img src="https://i.stack.imgur.com/hPkhB.png" alt="alt text"></p> <p>In text form:</p> <pre><code>XXX Some text here YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY ZZZZZZZZZ Body body body Sidebar! Body body body Sidebar! Body body body Sidebar! </code></pre> <p>X, Y, and Z are images (3 images total). Y can stretch along the X axis, and does so above, to fill the available space. (But doesn't cause "Some text here" to get squished and start breaking into multiple lines)</p> <p>I'd like to keep the "Some text here" part in one line. A line breaking here will not end happily.</p> <p>Is this possible, or should I simplify the layout around HTML?</p> <hr> <p>My current attempt using tables:</p> <pre><code>&lt;table cellspacing="0" cellpadding="0" border="0" style="height: 20px; width: 100%;"&gt; &lt;tr&gt; &lt;td style="width: 205px; height: 20px; background: url('images/horz_bar_left_end.png');"&gt;&amp;nbsp;&lt;/td&gt; &lt;td style="width: 5px; height: 20px; background: url('images/transparent.gif');"/&gt;&amp;nbsp;&lt;/td&gt; &lt;td valign="center" style="height: 20px; white-space: nowrap; font-weight: bold;"&gt;THIS IS A TITLE&lt;/td&gt; &lt;td style="width: 5px; height: 20px; background: url('images/transparent.gif');"&gt;&amp;nbsp;&lt;/td&gt; &lt;td style="width: 100%; background: url('images/blue.gif');"&gt;&amp;nbsp;&lt;/td&gt; &lt;td style="width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');"&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Close... ish. <em>All</em> of the columns (except the one with the text, and the <code>width: 100%</code> one) are ignoring their CSS width attribute in both Firefox and Chrome. This is what it looks like:</p> <p><img src="https://i.stack.imgur.com/RtLuD.png" alt="alt text"></p> <p>My attempt using <code>&lt;div&gt;</code> and all that CSS jazz.</p> <pre><code>&lt;div style="white-space: nowrap;"&gt; &lt;div style="float:left; width: 25px; height: 20px; background: url('images/horz_bar_left_end2.png');"&gt;&amp;nbsp;&lt;/div&gt; &lt;div style="float:left;"&gt;Some Text&lt;/div&gt; &lt;div style="float:left; width: 100%; height: 20px; background: url('images/blue.gif') repeat;"&gt;&amp;nbsp;&lt;/div&gt; &lt;div style="float:left; width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');"&gt;&amp;nbsp;&lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;div style="float:left; width: 500px;"&gt; body &lt;/div&gt; &lt;div style="float:left; width: 100px;"&gt; sidebar &lt;/div&gt; &lt;/div&gt; </code></pre> <p>...massively fails. It's on like three lines.</p> <p>For those wanting to play at home, here are the images:</p> <ul> <li>horz_bar_left_end.png: <img src="https://i.stack.imgur.com/nf2iu.png" alt="alt text"></li> <li>horz_bar_right_upper.png <img src="https://i.stack.imgur.com/tAtUb.png" alt="alt text"></li> <li>transparent.gif: 1x1 transparent GIF</li> <li>blue.png: 1x1 blue PNG. (#0073e4)</li> </ul>
 

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