Sidebar floating behind content?

HTML & CSS
1

http://goo.gl/UqO2h

#Sidebar and Content are in different divs (but inside the same container, #page), but for some reason sidebar is sliding behind Content. Am I missing something here? As you can see, the sidebar also breaks up very weirdly, some of it going behind the content while some of it drops below.

I was able to get it to work by floating the #sidebar right and adding a overflow:hidden to the #page container - but that seems like more of a work around than the correct way to do it.

2

I would take a look at your source HTML first. You have innumerable miss closed tags. This is a page I would start from scratch, code wise…:confused: Pay special attention to opening and closing of P(you cant only put line tags inside P tags, BTW), CODE ( why do are you using CODE tags anyway?) LI, DIVs

Some tips:

  1. overflow:hidden IS NOT a workaround but a very good solution to auto clearing a container;
  2. Floated items must be FIRST in the source code or they will appear BELLOW the last floated elements. If this wasnt the case then you could expect your sidebar to float up and cover up you slideshow.
  3. When trying to make a column by employing a floated element and an floated element(lets say two DIVs), the unfloated element’s content will slide under the floated element. you will need to ‘make space’ by giving the unfloated element a margin-(same direction as the float) of the same width or greater as the floated element; you can also give the unfloated element overflow:hidden ( yes, overflow is pretty handy!)

Hope guides you int he right direction