SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with the div positioning?

    HTML Code:
    <head>
            <style>
                body{
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div style="background:red;height:100px;margin-top:0;">Why is this not starting from top?</div>
        </body>
    I have the code as above. As you can see there is only one div. But why doesn't the div start form the top of the browser(Why is the yellow background seen at the upper-margin?) I know a way to fix using margin-top:-10px; but is that the best way?

  2. #2
    Afrika
    Join Date
    Jul 2004
    Location
    Nigeria
    Posts
    1,737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should be posted in the CSS forum

    Try

    <head>
    <style>
    body{
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div style="background:red;height:100px;top:0;">Why is this not starting from top?</div>
    </body>

  3. #3
    Afrika
    Join Date
    Jul 2004
    Location
    Nigeria
    Posts
    1,737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would also advise you to keep your css files separate.

    Good luck

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried that one as well. It is also not working.

    p.s. : I didn't know it was posted in the General Discussion Area. Any way to transfer this thread to the CSS forum

  5. #5
    Afrika
    Join Date
    Jul 2004
    Location
    Nigeria
    Posts
    1,737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guess the admin will do it.

  6. #6
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because you need to include a position: element to use the Top: element.

  7. #7
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Now that I see the left and right of the div, the same problem persists. Is there any way to fix the left and right sides as well?

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Browsers apply a default margin inside the window that is about 10px. You can remove this default margin with the following:
    Code:
    body {margin:0;}
    negative margins are not appropriate and positioning sounds like it is unnecessary, too. body {margin:0} should do the trick.

  9. #9
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks man. That worked out well for me.

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bhakunday View Post
    HTML Code:
    <head>
            <style>
                body{
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div style="background:red;height:100px;margin-top:0;">Why is this not starting from top?</div>
        </body>
    I have the code as above. As you can see there is only one div. But why doesn't the div start form the top of the browser(Why is the yellow background seen at the upper-margin?) I know a way to fix using margin-top:-10px; but is that the best way?
    Try setting the body to margin:0; then delete the margin-top from the div. hope I helped and works out.

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are not using a reset stylesheet, then your your css will use the browsers default margins and padding. Try this:

    Code:
     
    * {
    margin: 0;
    padding: 0;
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •