Is using negative values in CSS acceptable?

Let me consolidate my comments into an answer here.

First: Negative values are perfectly acceptable however I would use them sparingly. They are definitely useful in certain situations

HTML markup should follow the visual flow of your page. I wouldn't use a negative margin in the way you originally intended. One common use is when overlaying elements. Ex: http://jsfiddle.net/wdm954/jwBzv

How would I fix your top menu code? I would wrap #status and your UL within #topnav like this...

<div id="topnav">
  <div id="status">Logged in</div>
    <ul>
      <li>about</li>
      <li>browse</li>
      <li>join</li>
      <li>faq</li>
      <li>contact</li>
    </ul>
</div>

And use something along these lines for the CSS...

#topnav {
    float: right;
}
#topnav #status {
    text-align: center;
    margin-bottom: 15px;
}
#topnav li {
    display: inline;
    margin-left: 15px;
}

Here is the demo: http://jsfiddle.net/wdm954/RwEWN/3/

Hope this helps!


Negative values can be very powerful when used correctly. There is no problem with using negative values.

Tags:

Html

Css