Inconsistent div location on two pages

HTML & CSS
1

I am working on a website where the background is a drawing and the “header” is on the right side of the page, as it would be in a drawing for this company. The top of the div containing the company information is located slightly differently between two pages (I checked Chrome, IE 8 and Firefox), and I cannot find any difference in the code between the two pages. I am sure I am missing something obvious, but I am going crosseyed trying to find it. I am hoping someone here can take a look and quickly pick up what I am missing. I also went to chrome and used ‘inspect element’, but still could not find any difference between the two pages in the way the div is positioned. The div in question is on the top right of the page and its id is ‘header-name’.

The two pages are:

home page

and

philosophy page

I have a busy day mostly out of the office, so if you have questions my apologies if I don’t respond right away.

Thanks!

2

Hi GALJohnson! Welcome to SitePoint. :slight_smile:

I think the negative margin here is causing your grief:

#container {
  font-family: "Californian FB","Times New Roman",Times;
  font-size: 11pt;
  [COLOR="Red"]margin-bottom: -9px;[/COLOR]
}

Is there any reason for it? I’d just remove it. If it has a purpose, there will no doubt be a better solution.

3

Thanks for identifying that as the problem - but I’m still not sure why that was causing the problem. Unless I am still missing something, that was present for both pages (since it came from the css), and the content should have been the same on both pages, and when I looked I couldn’t see any difference - almost all of the content is coming from a common template.

So how did you identify that as the problem, if you don’t mind sharing?

thanks!

4

The difference is caused by id=“content_main” which exists in one of the pages and not in the other. It is absolutely positioned and has no impact on the flow.

In the other page you have div with some breaks in them which follow floated content and therefore it’s background rises up to meet #container and soaks the negative margin up that you placed on #container.

The other page has no such static content and the negative margin hits the right floated element instead.

Be careful with multiple floated elements like that. If you want a side column then just float one column and then stack the content inside otherwise some browsers won’t allow elements to rise pass a series of floats unless there are no gaps between them.