CODEWITHSUNDEEP
htmlcss
yapkm01
yapkm01

Reputation: 3775

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;
}

Upvotes: 0

Views: 73

Answers (1)

Joe Czucha
Joe Czucha

Reputation: 4295

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/

Upvotes: 3

Related Questions