title: HTML 5 / CSS (??) how to cause a div element to be on the next line?
body: <p>I have the below code. Objective is to have the &lt;div class="sign-on-menu"> to be on the next line but i couldn't do it. This div is on the left side of the &lt;a class ..> on the same line. However, I want this div on the next line. I thought a div is a block element by default, which would cause it to be on the next line. I tried changing the css to display:block and display:inline-block for the ".sign-on" and even ".sign-on-menu" classes,  but it didn't work. Any help would be great. Thanks.</p>
  
  <p>ps: How do I put a screen capture on stackoverflow?</p>
  
  <p>1) Inside JSP code</p>
  
  <pre><code>&lt;nav&gt;
      &lt;div id="nav-center" class="nav-center"&gt;
          &lt;a class="sign-on" href="/owner.jsp"&gt;Sign-on&lt;/a&gt;
          &lt;div class="sign-on-menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/owner.jsp"&gt;Owner&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/owner.jsp"&gt;Professional&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/nav&gt;
  </code></pre>
  
  <p>2) Inside CSS code</p>
  
  <pre><code>nav {
  width: 100%;
  height: 32px;
  background-color: #227BC8;  
  }
  
  .nav-center {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  }
  
  .sign-on {
  float: right;
  padding: 9px;
  background-color: #000000;
  text-decoration: none;
  color: #FFFFFF;
  display: block;
  }
  
  .sign-on:hover {
  background-color: #bfbfbf;
  color: #000000;
  }
  
  .sign-on-menu {
  float: right;
  margin: 0px;
  padding: 9px;
  background-color: #bfbfbf;
  }
  
  .sign-on-menu ul {
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 0px;
  list-style-type: none
  }
  
  .sign-on-menu a {
  text-decoration: none;
  color: #000000;
  }
  </code></pre>