display: inline; and overlapping?

Question

I have the below. The error class comes from here http://css.dzone.com/news/css-message-boxes-different-me

I added display: inline to the div so it wouldnt take up the whole row. However now instead of going onto the next row it stays on the same row and is drawn on top of links or the login form. How do i properly handle this? I dont know if i should add a <br> (if that works) or change the property css.

<div class="login">
<form action="/login" method="Post"><div>
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Login">
</div></form></div>
<div class="error">Error back - Title</div><br>

</body>
</html>

Answer 1

display:inline makes it behave as if it's just another item that works into the normal text flow of the page. Thus, if you want it to be forced down to the next line, then yes, you'll want to add a <br>. However, if you simply want to limit the width of the error message box but still have it on its own line, you probably don't want display:inline in the first place - instead, you'd just want to set the width: property to however large you want the box to be (for instance, width:500px; for 500 pixels wide, or width:50%; for half the width of the containing element).