DIV Tags Not Aligning Properly

[LateAtNight]

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!

http://upsetter.net/bass/dev-site/css/bc-styles.css

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.

[RyanReese]

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.

[ronpat]

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.

[LateAtNight]

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.

[LateAtNight]

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?

[TechnoBear]

@LateAtNight

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.

This post is probably a good place to start:

Welcome to The SitePoint Forums

##Welcome to The SitePoint Forums ###Some helpful posts to read. Where can I find the rules? Click the FAQ link in the top navigation bar. Where should I post? You’ll find a document explaining all the categories and tags here. How do I [do something] in Discourse? Here is a handy Discourse Cheat Sheet. What are Trust Levels? Here is an explanation of Trust Levels. ###More help and feedback If you have feedback, questions or concerns, please post them in this feedback thread. If you…

and this will also help:

Forum Posting Basics

When posting a coding question, it’s important to help people to help you. Ideally, post a link to a web page that demonstrates the issue. If that’s not possible (for example, if your site is not live yet) there are various other options. You might, for example, create a working example of the problem on a site like CodePen. You can then paste the link to your Pen here. (If you sign up for a free account at CodePen, your Pen will get embedded right here, like this: http://codepen.io/oknoblich/…

[PaulOB]

@LateAtNight

Now that I take out the clear:both on the “on” states, the index page is messed

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.

e.g.

.program-on,
.podcast-on,
.about-on,
a.program,
a.podcast,
a.about{margin-top:190px;clear:none}

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.

[LateAtNight]

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.