CODEWITHSUNDEEP
htmlcss
Aontaigh
Aontaigh

Reputation: 198

HTML / CSS: Text within my div is not lining up?

Code: http://pastebin.com/mtLHtjar

I do not understand why the text in my navigation div is not lined up.

I have navigationLeft div and navigationRight div within navigation.

The text in navigationLeft is above the text in navigationRight for a reason I am unaware of. Could someone point out my mistake?

Upvotes: 2

Views: 304

Answers (2)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

In action (see in Full screen)

There are so many solutions to this like:

  • Float (current solution)
  • Inline-block
  • Flex
  • Table-cell

body {
  width: 100%;
  margin: 0px;
  background-color: #F5F5F5;
}

#navigation{
  color: white;
  width: 100%;
  background-color: #292526;
  position: fixed;
  top: 0px;
}

#navigation ul li {
  display: inline;
}

#navigation a {
  font-size: 120%;
  color: white;
  text-decoration: none;
}

#navigationLeft {
  float: left;
  font-size: 180%;
}

#navigationRight {
  float: right;
}
<div id="container">
  <div id="navigation">
     <div id="navigationLeft">
        <a href="#">Vist Clare Ireland</a>
     </div>
     <ul id="navigationRight">    
        <li><a href="#">Home |</a></li>
        <li><a href="#">News |</a></li>
        <li><a href="#">Contact |</a></li>
        <li><a href="#">About |</a></li>
        <li><a href="#">Hotels |</a></li>
        <li><a href="#">Bars |</a></li>
        <li><a href="#">Restaurants |</a></li>
        <li><a href="#">Map |</a></li>
        <li><a href="#">Transport</a></li>
     </ul>
   </div>        
</div>

You may search them for further readings.

UPDATE

This is update to fulfill the last comment from question's author:

You should use display: inline-block for that purpose

#navigation{
  color: white;
  width: 100%;
  background-color: #292526;
  position: fixed;
  top: 0px;
}
#navigationLeft {
  width: 30%;
  display: inline-block;
  vertical-align: middle;
  font-size: 180%;
}

#navigationRight {
  width: 70%;
  display: inline-block;
  vertical-align: middle;
}
#navigation ul{
  float: right;
}
#navigation ul li {
  display: inline;
}

#navigation a {
  font-size: 120%;
  color: white;
  text-decoration: none;
}
<div id="navigation">
  <div id="navigationLeft">
     <a href="#">Vist Clare Ireland</a>
  </div><div id="navigationRight">
    <ul>    
      <li><a href="#">Home |</a></li>
      <li><a href="#">News |</a></li>
      <li><a href="#">Contact |</a></li>
      <li><a href="#">About |</a></li>
    </ul>
  </div>
</div>

UPDATE 2

for the inline-block to work as expected, you need to remove the extra space between two elements. If you add a white-space like

  • space
  • tab
  • newine ( This is your case )

between them, a gap will appear.

Depending on the situation, you can use either of the following methods to get rid of the gap:

1- Put theme in one line

    <input type="text"><input type="text"><input type="text">

2- Removing the space ( Don't worry, it is correct! :) )

    <input type="text"><
    input type="text"><
    input type="text">

3- Use HTML comments

    <input type="text"><!--
    --><input type="text">

I suggest you to use the Number 1 method (Put theme in one line), but either will work.

Upvotes: 1

Leena Lavanya
Leena Lavanya

Reputation: 333

Here's the fixed code: 

<head>
<meta charset="utf-8">
<title>Visit Clare</title>
<style type="text/css">
    body {
        width: 100%;
        margin: 0px;
        background-color: #F5F5F5;
    }

    #navigation {
        color: white;
        width: 100%;
        background-color: #292526;
        position: fixed;
        top: 0px;
    }


    #navigation ul li {
        display: inline;
    }

    #navigation a {
        font-size: 120%;
        color: white;           
        display: inline;
    }

    #navigation a {
        font-size: 120%;
        color: white;
        text-decoration: none;
    }

    #navigationLeft {
        font-size: 180%;
        display:inline-block
    }

    #navigationRight {
         float:right;
         width:300px;
    }
</style>
</head>

<body>
<div id="container">
    <div id="navigation">
        <ul id="navigationLeft">
            <li><a href="#">Visit Clare Ireland</a></li>
        </ul>

        <ul id="navigationRight">    
            <li><a href="#">Home |</a></li>
            <li><a href="#">News |</a></li>
            <li><a href="#">Contact |</a></li>
            <li><a href="#">About |</a></li>
            <li><a href="#">Hotels |</a></li>
            <li><a href="#">Bars |</a></li>
            <li><a href="#">Restaurants |</a></li>
            <li><a href="#">Map |</a></li>
            <li><a href="#">Transport</a></li>
        </ul>
    </div>        
</div>
</body>

</html>

Upvotes: 0

Related Questions