1 Reply Latest reply on Apr 26, 2010 7:36 PM by HelixRiver

    CSS div positioning problem


      Hi there,


      I'm having some trouble with getting my DIV layout to work as I want.  Basically, I have a div called "header", and a div called "mainContent", both inside of a "container" div.  I want the "mainContent" div to slightly overlap the header div, and sit behind it (using the z-index).  It looks fine in Dreamweaver, but then in the browsers there's like a 200 pixel gap between the two.  I have all of my margins zeroed out, and I have tried as many fixes as I can think of, to no avail.


      Here's how it looks in Dreamweaver (with the "strings" sitting up behind the header)


      page in dreamweaver.jpg


      And here's what happens in the browser:



      Any suggestions to how to fix this would be very welcome.  By the way, I'm using DW CS3, if that is of any importance.


      Oh, and one other thing, not such a big deal, but you may be able to see in that little image from Dreamweaver that in the header I have a navigation bar, made up of a CSS list.  In DW, the bullet list icon appears, but in the browser the bullet points don't show up.  (Which is what I prefer - it's just that I don't understand why they show up in DW)


      Many thanks,


        • 1. Re: CSS div positioning problem
          HelixRiver Level 1

          I found the answer to the problem (well actually someone else saw it, I can't take credit ).


          I had a CSS ID called "content-TOP p", with a margin-top of 120px.  I took that away, and instead set it up with a padding-top of 120px, and the problem was solved.


          As for the bullet points for the list items that show up in Dreamweaver and not in the browser, well still no idea why that does it, but no big deal.