'Div won't be at top of page

I have a div on my website that won't be on the top, it's always a little bit below the top so I was looking for a way to make it be at the top without space between the div and the top, but I've had no luck yet.

Here is the CSS code I've tried so far:

.usertopbar {
    display: inline-block;
    background: url(images/counterbar_bg.jpg) repeat-x #111;
    height: 32px;
    bottom: 600px;
    width: 1100px;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
    box-shadow: 0px 0px 16px #000;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}
htmlcss


Solution 1:[1]

Your code looks ok (though I tend to avoid explicitly setting a height on things at all costs). I suggest including normalize.css before your own CSS. It will reset several of the browser's defaults, which is what I believe is getting in your way here. It's also the default used in the Bootstrap and Foundation frameworks, so you can bet it's one of the best reset stylesheets out there.

Solution 2:[2]

Set the margin and padding or your <html> and <body> to 0. To be specific, I think it is the margin of the <body> that does it, but make it a habit to explicitly set them all to 0 by default.

Solution 3:[3]

You forgot to add a dot (or hash) to the element. Be sure to set the margin and padding of html & body to 0. See the answer and cleaned code below. If you want to have the div sticky at the top, add position: fixed; and top: 0; left: 0; to the snippet.

html,body {
  margin: 0;
  padding: 0;
}

.usertopbar {
    display: inline-block;
    background: url(images/counterbar_bg.jpg) repeat-x #111;
    height: 32px;
    width: 1100px;
    line-height: 30px;
    text-align: left;
    padding-left: 10px;
    box-shadow: 0px 0px 16px #000;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}
<div class="usertopbar"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hellojason
Solution 2 RaminS
Solution 3 Roy

Related Questions