3 Total divs side by side with the left and right divs at 100% width. Please Help :)

Hi, I could easily do what I need to do with a basic table but know that it's not proper. So I'm wondering how I can do the following...


[ 100% ] [ 1022px ] [ 100% ]

Basically Have a fixed div in the middle with 2 divs on each side so I can place repeating backgrounds in them. I've been trying to do it unsuccessfully.

Here is my attempt...

<div style="width: 100%; height: 300px;">
<div style="width: 100%; height: 300px; background: url(images/headbg.png) repeat-x; float: left;"></div>
<div style="width: 1022px; height: 300px; background: url(images/head.png) no-repeat; float: left;"></div>
<div style="width: 100%; height: 300px; background: url(images/headbg.png) repeat-x; float: right;"></div>
</div>

Thanks for any help!

Hello CruxCreations,
You've already see that 100% widths don't work.
Try this instead - http://nopeople.com/CSS/1022px%20center-fluid%20sidebars/index.html

Hi,
If for backgrounds why not just having a "content" div inside "background" div like following:
<div style="width: 100%; background: url(images/headbg.png) repeat-x; ">
<div style="width: 1022px; height: 300px; background: url(images/head.png) no-repeat; "></div>
</div>

But I'd rather follow Excavator's...
You have more control with CSS method.

Depending on what your doing.. this may be a lot simpler (http://nopeople.com/CSS/1022px%20center-fluid%20sidebars/another/index.html)