DIV Tags Not Aligning Properly

I’m working on a website and am having some alignment problems with my navigation DIVs.

When someone is on a page, I would like the button for that page to be inactive. And so along with the navigation I created a class that would display the lower half of the navigation button. This trick works fine on the index page but even though I use the same approach it doesn’t work on any other page (to see an example, click on the podcast.htm link on the page above).

I have checked the CSS over and over again and can’t figure out a solution. All of the DIV tags have the same properties, so they should work on every page. The classes in question are at the very end of the CSS file linked below (.program-on, .podcast-on, .about-on). Any help would be greatly appreciated!


PS: I haven’t used this forum in years, so I had to create a new account. I don’t know what the proper etiquette is about posting links, CSS code, etc.

The podcast page would be fine if you removed the clear_both from the podcast_on class in your CSS. Remove it for all the “on” CSS classes

Actually, you actually should REALLY consider redoing that page. Or at least the header section. It’s quite poorly done. You are trying to position it all the wrong ways. Not trying to be rude but the current way will give you more headaches than you want.

IF you wanted to take the lazy approach, just removing clear:both from the podcast_on class would be fine.

You don’t have many pages so it wouldn’t take a huge toll on you.

Echoing @RyanReese 's sentiments, the nav menu would be much easier to manage if it were in its own container and not mixed with the social icons, et.al.

Thanks Ryan - removing the clear:both works! I had tried that on individual “on” classes but not all three.

So what are these “headaches” you gents are warning me about? The pages look good and everything seems to work now.

Ack! I spoke too soon… Now that I take out the clear:both on the “on” states, the index page is messed up (nav buttons appearing about 40px too high. Why do the attributes on the “on” classes affect the normal navigation? So you’re suggesting the nav menu should in it’s own container and then positioning that where it’s supposed to be?

This post is probably a good place to start:

and this will also help:

When you remove the clear:both then the margin-top of those elements now refers to the top of the containing div because it is no longer clearing the floats above them.

You need to change all the margin-tops and remove all the clear:both reules.



As others have said a more robust way it to have the nav links in their own container such as a ul. You then just position the ul rather than each individual component.

Thanks a lot everyone. The two main fixes were: 1) put everything inside the #container DIV, and then 2) put all of the navigation inside a #navcontainer DIV and handle positioning there. Didn’t post new pages to the dev site, but everything is looking great now.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.