HTML: Fill available width

What I'm trying to do is this:

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: 20开发者_运维问答px; 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:

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:

• horz_bar_left_end.png:

  

• horz_bar_right_upper.png

  

• transparent.gif: 1x1 transparent GIF
• blue.png: 1x1 blue PNG. (#0073e4)

You can do with many way to archive your web layout.

Code update and look at http://jsbin.com/awudi4/

LOL! Let's see if I understand... Try this!

HTML:

<div id="foo">
    <h3>This is my CSS title! :)</h3>
</div>

CSS:

#foo {
    width:900px;
    margin:0 auto; /* center to the screen horizontally */
    background:#ccc;

    /* increase border radius until it is curvefull! */
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
}
#foo h3 {
    font:bold 14px Georgia, Arial, Sans;
    color:#333;
    margin:0;
    padding:25px 0 25px 50px; /* top, right, bottom, left */
}

Simpler? XD

Try this

<table><tr>
  <td>XXX</td>
  <td>Some text here</td>
  <td>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</td>
  <td>ZZZZZZZZZ</td>
</tr>
</table>

<div style="float:left; width: 100px; background: url(X) repeat-x;"> </div>
<div style="float:left;"> Some Text </div>
<div style="float:left; width: 200px; background: url(Y) repeat-x;"> </div>
<div style="float:left; width: 150px; background: url(Z) repeat-x;"> </div>
<div style="clear: both;"></div>
<div style="float:left; width: 500px;"> body </div>
<div style="float:left; width: 100px;"> sidebar </div>

You can change widths for your wrapper width