Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Adding css code superimposes one section on another

Trying to figure our strange phenomonen...

9:40 pm on Jun 30, 2012 (gmt 0)

New User

joined:Jan 19, 2012
posts: 20
votes: 0

I'm having a strange problem with CSS for a header section which I can't figure out. I should say this is for the header of a vbulletin forum so there may be complications there, but even so, the css problem seems fairly simple, if only I had the right knowledge...

I have this code in my main html page:

<div id="headerimage">
<img src="http://www.example.com/images/image1.jpg" alt="Header Image" width="700" height="50" />

<div id="navigationlinks">
<p><a href="http://www.example.com">Home</a> |
<a href="http://www.example.com/one.htm">Section One</a> |
<a href="http://www.example.com/two.htm">Section two</a> |

And this code in my css:


What the code produces is the header image with the navigation links superimposed over the top of the image. This isn't what I want - I want the image at the top and then the links underneath.

However, when I remove this line:


the code works fine, and I get the image at the top and the links underneath, rather than the second div superimposed over the first one.

And I can't for the life of me figure out why...is there some rule of css that might be producing this phenomonen? I could just leave the code without the #headerimage line, but I feel like I need to understand why it is working this way.

Any help gratefully received!
12:57 am on July 1, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 347

Get the obvious stuff out of the way first. Does your code say anything about divs in general-- that is

div {blahblah, et cetera}

--or about divs with an id property--

div[id] {blahblah}

-- or about things-in-general with an id property?


(But don't quote me on that last bit of syntax.)

Second: Does the page include any inherited CSS from somewhere "upstairs"? That includes things the browser will do on its own, unless given instructions to the contrary. It's a good idea to spell out your defaults, even if that's what 9 out of 10 browsers would do anyway:

hr {text-align: center}
seems a waste of time and space until you run into the one browser that thinks hr's should be left-aligned.

Having to say

div, p, blockquote, table, ul, h1, h2 et cetera {diaplay: block;}

may seem a bit over the top, but it can't hurt. (Especially when, like me, you expect your table cells to be top-aligned and your headers to be centered-- unless you specifically declare otherwise.)

Uhm. What was the question again?
5:32 am on July 1, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
votes: 21

This is the kind of situation where a browser plug-in/tool can be a real help. Try the F12 Developer Tools in IE or Firebug in Firefox. Then you can inspect individual elements and see exactly what the CSS settings are and where they came from.
5:43 pm on July 1, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

That CSS alone won't be the cause, you likely have a float or absolute positioning somewhere that is taking the elements out of the natural document flow, causing the overlap. As mentioned, Firebug. :-)