CODEWITHSUNDEEP
htmlcss
Andrew Hardiman
Andrew Hardiman

Reputation: 969

CSS Styling alignment

good evening. The below code is for my navigation bar on my website.The two unordered lists are currently sat side by side (inline) which is what I wanted. However, I would like the second sat over on the right had side. I know there are several ways to achieve this. My question is specific to this method, as I do not understand why it is happening. Why is it, if I add the following code to my style sheet (.float { float: right }), the second moves to the right, but does not stay 'inline' with the first ; it shows on a slightly different level? I do not understand why this is the case. Would someone be kind enough to explain?

Secondly, if I add a different class to each of the unordered lists and float one to the right and one to left, simaultaneously removing the CSS ( .nav ul {display: inline; ), I do not understand why it is that they sit 'inline' with each other? What is instructing them to do so? How does a float: right instruction, also instruct the element to move up besides the one on the left? Many Thanks 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;
     }

Upvotes: 3

Views: 97

Answers (1)

user3826603
user3826603

Reputation: 26

An element is said to be inline-level when the calculated value of its display CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents but is distributed in lines with other inline-level content. Typically content of a paragraph, being text, with different formatting like emphasis, or images, is made from inline-level elements. (from: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model)

If you apply inline-block to your "nav ul" your elements will display 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>

Upvotes: 1

Related Questions