sidebar positioning Options

[minidiapolis]

On www.fountainchurch.org why isn't the sidebar sitting on top of the fountain. I thought I used absolute positioning right?

[Dr Z]

I may be off my rocker... After a quick look, I saw some puzzling points:

#image {
position : absolute;
width : 100%;
}
#sidebar {
width : 20%;
float : left;
}

Your style sheet gives 100% to #image & 20% to #sidebar"; that does not add up!
#image is positioned 'absolute' but its coordinates are not specified.

I have a an allergic reaction to floats, but would recommend starting with:

#image {width : 80%; float : left;}
#sidebar {width : 20%; float : left}

Alternatively, if you want the #image as the container block, then use it as a wrapper and put all other div's - such as #sidebar, #contents, etc, inside that div.

Hope this may help.

[minidiapolis]

I'm not understanding your response. . . . shouldn't the sidebar be sitting on top of the picture and not on the left on a white background?

[pandy]

That's in IE. In other browsers the image and the content is on top of (covering) the sidebar.

Since you already use position: absolute, it's better to stick to that. Remove the float declaration from sidebar and make that position: absolute too.

Then move the HTML for the sidebar to the end of the code. That way it will be on top and it will also show last on the page without CSS which is better.

I'd use padding or a left offset (left: ...) on #content rather than margin on all Ps it contains. You don't need an alt text for the fountain picture since it's purely decorational. Just leave the value of alt empty: alt="". Makes talking thingamajigs skip it.

[minidiapolis]

I moved the sidebar code but in IE it still has a white background and in opera the sidebar isn't appearing at all.

[pandy]

You need to make the changes to the style sheet too.