CSS spacing and height

Posted on 2011-10-12
Last Modified: 2012-05-12
I'm having a css issue. I want my header to sit at the top of my page:

But instead it's in the middle. I think there is a problem with my styles on .header-bg. I noticed that if I remove the height the rest of the layers go to the proper location. But this also causes the div tag to close up and not display the background.

Any ideas how I can fix this?

Question by:elliottbenzle
    LVL 14

    Accepted Solution

    Try changing your CSS to:

    #header-container {
          margin: 0 auto;      
          width: 841px;
          height: 125px;

    And, sometimes I realized problems with the # instead of . so try this:

    .header-container {
          margin: 0 auto;      
          width: 841px;
          height: 125px;

    and rename your div from id="header-container" to class="header-container"
    LVL 30

    Expert Comment

    Can you show us how it's supposed to look? If you do remove the height and top declarations, it should be fine. That's the reason it's pushing it down.
    LVL 4

    Author Closing Comment


    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now