image does not stay in right position

Question

I want something like this:

+-------------------------------------------------------------------+
|                                                                   |
| LOGO                           Search_box... ITEM_1 ITEM_2 ITEM_3 |
|                                                                   |
+-------------------------------------------------------------------+

The LOGO is an image. Search_box is an input text and ITEM_X an orizontally list item.

I tried this, but the logo doesn't stay where I want: https://jsfiddle.net/mna4de2n/

Note: I did not implement the input text yet.

CSS:

header{
    width: 100%;
    height: auto;
    text-align: center;
    display: inline-block;
}

header ul {
    list-style-type: none;
    text-align: center;
    padding: 0.5vw;
    overflow: hidden;
}

header li {
   display: inline;
}

header li a{
    display: inline-block;
    color: #262626;
    text-align: center;
    padding: 0.5vh 0.5vw;
    text-decoration: none;
}

header .left {
    padding-left: 15%;
    float: left;
}

header .right {
    float: right;
    padding-right: 25%;
}

header img {
  width: 10%;
}

HTML:

<header>
    <div class="left">
      <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        </ul>
    </div>
</header>

Because `li` stands for `list item`. `li` should go inside `ol` or `ul`. [See this](https://www.w3schools.com/TagS/tag_li.asp). — Vanity Slug - codidact.com, Sep 29 '17 at 18:09
It's great that you have a jsfiddle but you also add the code in a code block/snippet in the question itself since the fiddle could break at some point. — Lexi, Sep 29 '17 at 18:10
There is a typo in the CSS change that you made, @alex. See the .left class. It says "disaply" instead of "display." Display should just be removed since it has no effect here. — Trioj, Sep 29 '17 at 18:15
@alex, thank you. But, what about vertically align of the logo? — Alex, Sep 29 '17 at 18:17
Yeah, thank you @Trioj. [Here is new link](https://jsfiddle.net/mna4de2n/9/). — Vanity Slug - codidact.com, Sep 29 '17 at 18:18
@Alex to vertically align [read this](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div). — Vanity Slug - codidact.com, Sep 29 '17 at 18:19

score 4 · Accepted Answer · answered Sep 29 '17 at 18:25

Why not use flexbox?

header {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

header img {
  width: 50%;
}

header .left {
  width: 30%;
}

header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}

header ul {
  list-style-type: none;
  padding: 0.5vw;
  overflow: hidden;
  display: flex;
}

header li a {
  color: #262626;
  padding: 0.5vh 0.5vw;
  text-decoration: none;
}

header input {
  height: 30px;
  align-self: center;
}

<header>
  <div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
  </div>
  <div class="right">
    <input type="search">
    <ul>
      <li><a class="active" href="#home">Matcha</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
</header>

score 2 · Answer 2 · answered Sep 29 '17 at 18:11

<header>

<div class="right">
  <ul>
    <li><a class="active" href="#home">Matcha</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
</div>



<div class=""> <!-- You do not need this class here, now all you need to do is work on centering your menu. -->
 <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>

I moved your logo after the right floated menu. and removed the li tag from the logo and the class for that div (float left is not needed.).

score 0 · Answer 3 · answered Sep 29 '17 at 18:19

You need to set the image width to pixels, instead of percentage, this is making the parent of the image to take the full width of the header. Which is causing the issue. Also removing the li tag wrapping the image, since it is of no use.

Before:

header img {
  width: 10%;
}

<div class="left">
    <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>

After:

header img {
  width: 100px;
}

<div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>

Note: Please view the demo in full screen to see the change.

header {
  width: 100%;
  height: auto;
  text-align: center;
  display: inline-block;
}

header ul {
  list-style-type: none;
  text-align: center;
  padding: 0.5vw;
  overflow: hidden;
}

header li {
  display: inline;
}

header li a {
  display: inline-block;
  color: #262626;
  text-align: center;
  padding: 0.5vh 0.5vw;
  text-decoration: none;
}

header .left {
  padding-left: 15%;
  float: left;
}

header .right {
  float: right;
  padding-right: 25%;
}

header img {
  width: 100px;
}

<header>
  <nav>
    <div class="left">
      <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </nav>
</header>

score 0 · Answer 4 · answered Sep 29 '17 at 18:23

I have kept the li under ul, instead of div and changed the image size to pixels.

<div class="left">
          <ul>
            <li>
              <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
            </li>
          </ul>

        </div>

header {
  width: 100%;
  height: auto;
  text-align: center;
  display: inline-block;
}

.left ul{
  padding:0;
}

header ul {
  list-style-type: none;
  text-align: center;
  padding: 0.5vw;
  overflow: hidden;
}

header li {
  display: inline;
}

header li a {
  display: inline-block;
  color: #262626;
  text-align: center;
  padding: 3vh 0.5vw;
  text-decoration: none;
}

header .left {
  padding-left: 15%;
  float: left;
}

header .right {
  float: right;
  padding-right: 25%;
}

header img {
  width: 80px;
}

<header>
  <nav>
    <div class="left">
      <ul>
        <li>
          <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
        </li>
      </ul>

    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </nav>
</header>

image does not stay in right position

4 Answers4