CSS Question

[planetsim]

This is not a PHP question as stated in the title its all about CSS and maybe even XHTML, thought this would be best discussed here in the EL instead of cluttering other forums up.

My CSS skills arent what you'd call guru status and I am sure most still have a bit of trouble.

Ok at the moment I am using CSS Positioning which isnt working too well because of IE and in some cases if content is smaller than sidebar (sidebar is navigation which the CSS Positioning looks after) it goes below the content, and out of the body id.

http://demoblog.paulmcilwaine.com/ If your using Firefox this is how its meant to look however clicking on say comments http://demoblog.paulmcilwaine.com/78/view.html for example you will notice what I mean by Side Bar going below the Body id.

I am thinking maybe positioning isnt what I need because of the way IE handles it. Does anyone know away I can fix this (btw besides the sidebar going below the body which is the main thing I want fix, all other browsers display correctly except IE).

[pyro]

Rather than using absolute positioning, as you are, I would recommend using floats, as you will be able to clear them (thus removing your problem). Basically, float your content section to the left, and either float your sidebar to the right, or give it left margin (the same or greater than the width of your content section) and then you can place a div (or other element) below it with clear: both set on it. Alternatly, take a look at this method of clearing floats: http://www.positioniseverything.net/easyclearing.html

Or, you could take a look at this if you want to stick with your absolute positioning: http://www.shauninman.com/mentary/past/absolutely_positive.php

[planetsim]

Thanks for the links, ill take a look at the floats, as with positioning im sure its going to be a huge hack to get it to display properly in IE.

[pyro]

Sure thing. Let me know if you need any more help.

As far as it being a big hack for IE - not really. Without JavaScript, there isn't a way to clear absolutely positioned elements, so you'd need to do the same thing for IE or other browsers.

[planetsim]

That seemed to do the trick 🙂

thanks

[pyro]

You bet. 🙂

[Roger_Ramjet]

Try this online tutorial for CSS, it covers all the basics especially your div overflow problem: http://css.maxdesign.com.au/selectutorial/.