css problem with navigation

I use example 3 given in this page:

http://simple-navigation-demo.andischacke.com/

and I have a problem because when I open the main page (for example)

http://simple-navigation-demo.andischacke.com/

I get an empty div on the left instead of开发者_C百科 the content div filling the whole area.

On the other hand when I open a page from the menu (for example)

http://simple-navigation-demo.andischacke.com/books

Everything is just fine.

Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?

There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.

That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.

You might need to modify the width of your content div after that, but hopefully this gets you on the right track.