Aligning CSS styles
Good evening. Below is the code for my navbar on my website. The two unordered lists are currently inline, which is what I wanted. However, I would like the second one to sit on the right side. I know there are several ways to achieve this. My question is specific to this method as I don't understand why this is happening. Why, if I add the following code to my stylesheet (.float {float: right}), the second moves to the right, but not "inline" with the first; does he show on a slightly different level? I don't understand why this is so. Would anyone be kind enough to explain?
Second, if I add a different class to each of the unordered lists and float one to the right and one to the left, removing the CSS (.nav ul {display: inline;), I don't understand why it is that they are "in line" each with friend? What instructs them to do this? How does float: right also instruct the element to float up, other than the one on the left? Thanks a lot display: inline; }
http://jsfiddle.net/mugman/rnmht1y2/
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class="float">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
<style>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.nav ul {
display: inline;
}
source to share
An element is called inline-level when the computed value of its CSS display property is inline, inline-block, or inline-table. Visually, it is not a block of content, but is distributed in lines with other content at a linear level. Typically, the content of a paragraph that is text with different formatting such as emphasis or images is derived from inline-level elements. (from: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model )
If you apply an inline-block to your "nav ul", your items will appear inline.
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.nav ul {
display: inline-block;
}
.float {
float: right;
}
<!DOCTYPE html>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class="float">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
source to share