Confusing CSS Layout Problem

HTML & CSS
1

Hi all,

I am redesigning a page for somebody and I’m having a little trouble figuring out a problem with the CSS layout.

The test page is at http://togevi.com/aquarius

On this page, there should be 2 containers, one under the other. The first container is displayed correctly and inside this you can see the reading and the right-panel with further links to other readings.

The second container (premium-container with pink background) should appear underneath but for some reason, it’s appearing in the same spot behind it.

I have checked all of the CSS and HTML for the page and I cannot find out why it is not appearing below, like it should be. I tried to give it a “relative” position but this placed it on top of the first container but still in the same place.

A little push in the right direction would be appreciated. There is clearly something really obvious I’m missing here.

2

[font=verdana]I’m not sure if I’ve understood what you’re after, but the problem might be because the container div is floated but the premium one isn’t. You can force the premium div to appear below the container by adding float:left; to the CSS.

On another note, it might be worth validating your code and fixing some of the errors. You’ve got quite a lot there, and there’s a decent chance that some of them may cause rendering errors in some browsers.[/font]

3

Yes, I know there are a lot of errors on the page. For the record, this isn’t my code. This is a template that was designed some time ago - I am improving it :slight_smile: I am working my way through the imperfections but, as you said, there are a lot of them so it takes time :slight_smile: I have applied the float element and it seems to have resolved the issue. Thanks for your help - Now on to the next improvement.