Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ sidebar positioning

Posted by: minidiapolis Feb 10 2008, 10:59 PM

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

Posted by: Dr Z Feb 11 2008, 01:23 AM

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

QUOTE

#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:

QUOTE

#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.

Posted by: minidiapolis Feb 11 2008, 11:54 AM

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?

Posted by: pandy Feb 11 2008, 01:18 PM

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.

Posted by: minidiapolis Feb 11 2008, 04:30 PM

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

Posted by: pandy Feb 11 2008, 04:41 PM

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