What I’m trying to do is this: In text form: XXX Some text here

Question

0

Editorial Team

Asked: May 18, 20262026-05-18T21:24:32+00:00 2026-05-18T21:24:32+00:00

What I’m trying to do is this: In text form: XXX Some text here

0

What I’m trying to do is this:

alt text

In text form:

XXX Some text here YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY ZZZZZZZZZ

Body body body                                          Sidebar!
Body body body                                          Sidebar!
Body body body                                          Sidebar!

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)

I’d like to keep the “Some text here” part in one line. A line breaking here will not end happily.

Is this possible, or should I simplify the layout around HTML?

My current attempt using tables:

<table cellspacing="0" cellpadding="0" border="0" style="height: 20px; width: 100%;">
  <tr>
    <td style="width: 205px; height: 20px; background: url('images/horz_bar_left_end.png');">&nbsp;</td>
    <td style="width: 5px; height: 20px; background: url('images/transparent.gif');"/>&nbsp;</td>
    <td valign="center" style="height: 20px; white-space: nowrap; font-weight: bold;">THIS IS A TITLE</td>
    <td style="width: 5px; height: 20px; background: url('images/transparent.gif');">&nbsp;</td>
    <td style="width: 100%; background: url('images/blue.gif');">&nbsp;</td>
    <td style="width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');">&nbsp;</td>
  </tr>
</table>

Close… ish. All of the columns (except the one with the text, and the width: 100% one) are ignoring their CSS width attribute in both Firefox and Chrome. This is what it looks like:

alt text

My attempt using <div> and all that CSS jazz.

<div style="white-space: nowrap;">
  <div style="float:left; width: 25px; height: 20px; background: url('images/horz_bar_left_end2.png');">&nbsp;</div>
  <div style="float:left;">Some Text</div>
  <div style="float:left; width: 100%; height: 20px; background: url('images/blue.gif') repeat;">&nbsp;</div>
  <div style="float:left; width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');">&nbsp;</div>
  <div style="clear: both;"></div>
  <div style="float:left; width: 500px;"> body </div>
  <div style="float:left; width: 100px;"> sidebar </div>
</div>

…massively fails. It’s on like three lines.

For those wanting to play at home, here are the images: