Q:

HTML 5 / CSS (??)  how to cause a div element to be on the next line? 

I have the below code.  Objective is to have the <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 <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. 
ps: How do I put a screen capture on stackoverflow? 
1) Inside JSP code
<nav>
    <div id="nav-center" class="nav-center">
        <a class="sign-on" href="/owner.jsp">Sign-on</a>
        <div class="sign-on-menu">
            <ul>
                <li><a href="/owner.jsp">Owner</a></li>
                <li><a href="/owner.jsp">Professional</a></li>
            </ul>
        </div>
    </div>  
</nav>

2) Inside CSS 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;
}

A:

Try adding clear:right; to your .sign-on-menu class:
.sign-on-menu {
  float: right;
  clear: right;
  margin: 0px;
  padding: 9px;
  background-color: #bfbfbf;
}

Working fiddle: https://jsfiddle.net/hpm285qo/2/

