Liquid CSS 3 column Header Layout - fixed, liquid, fixed

[bernie1227]

ok gotcha, I've made it liquid now, but I had to cheat a bit.

<img src="images/DRO_trans.png"  style="width: 330px; float: left; display: inline-block;">
<div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/glimpses-astral.png);"></div>
<img src="images/Thor-3rd-300.jpg" style="width: 300px; float: left; position: absolute; right: 0;">

ok, let's go through this:
Firstly, I've made it all inline, which you can change if you want.
Secondly, and very importantly to how it works; the center image is now actually a div with the image src as a background.

<div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/glimpses-astral.png);"></div>

Thirdly, it's alos now absolutely positioned. The idea behind this, is that one thing that div's can do that images can't, is that their width can be dictated by their positioning. So the idea here is, it's positioned the width of the left and right images away from each edge, causing it to fill that space:

<div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/glimpses-astral.png);"></div>

Just say if you have any problems.

[sreilly24590]

Bernie,

I appreciate the time and effort. The issue I had was the middle image being used as a background image it was repeating so I added the CSS rule for background-repeat: no repeat. Problem is I was using an image I created of a gray scale gradient as the background across the header. This is turning out to be more of a challenge than I thought it would be. Is it possible that a Dreamweaver extension like Flexi CSS is worth considering?

Steve

[bernie1227]

I'm a little confused as to what the exact problem is. Do you want to repeat it sideways? Or not at all? I can't help much with dreamweaver, sorry, I haven't ever used it.

[sreilly24590]

The background image is suppose to be the gradient image which does repeat-x across all 3 div tags of the header. The DRO_trans.png image is fixed 330x200px, the right image Thor-3rd-300.jpg is fixed at 300x200px, and the center expands to the area between the two (liquid) width wise while the height remains at 200px with the glimpses-astral.png image centered.

Thanks again,

Steve

[bernie1227]

ok, I think I get what you're saying, try this:

<img src="images/DRO_trans.png"  style="width: 330px; float: left; display: inline-block;">
<div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/background-gradient.png);"><img src="images/glimpses-astral.png" style="margin: 0 330 0 300;"></img></div>
<img src="images/Thor-3rd-300.jpg" style="width: 300px; float: left; position: absolute; right: 0;">

so the only changes in this are:

<div style="height: 300px; position: absolute; right: 300px; left: 330px; background-image: url(images/background-gradient.png);"><img src="images/glimpses-astral.png" style="margin: 0 330 0 300;"></img></div>

and the margin rule in the image is what is centering the image:

<img src="images/glimpses-astral.png" style="margin: 0 330 0 300;"></img>

at least that's what I think you're talking about.