How To Place Image Next To Text CSS

I would like to place an image to the left of the text and keep it like that depending on the resolution of the window. Here's what it looks like without an image: http://prntscr.c

Solution 1:

If you're going to use floats and widths for the logo, use that for the menu also.

.xd {
  float: left;
  width: 90%;
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.xd li {
  display: inline;
}

.xd a {
  display: inline-block;
  padding: 5px;
  color: #080808;
}

.logo {
  width: 10%;
  height: auto;
  float: left;
}

<div class="container">
  <div id="container-fluid">
      <img class="logo" src="http://placehold.it/50x50">
    <ul class="xd">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="news.html">News</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li>
        <a href="map.html">Map</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

You could also use flexbox. Perhaps something like this:

header,
ul {
  display: flex;
}

header img {
  display: block;
  max-width: 100%;
  height: auto;
}

header ul {
  flex-grow: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
}

header a {
  padding: 5px;
  color: #080808;
}

<header>
  <div>
    <img src="http://placehold.it/50x50">
  </div>
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="about.html">About Us</a>
    </li>
    <li>
      <a href="news.html">News</a>
    </li>
    <li>
      <a href="gallery.html">Gallery</a>
    </li>
    <li>
      <a href="map.html">Map</a>
    </li>
    <li>
      <a href="contact.html">Contact Us</a>
    </li>
  </ul>
</header>

Solution 2:

You can use position: absolute; and the default settings on the image as shown below. (You can use top and left settings to move it away from the border/corner if you want)

This keeps the menu items centered in relation to the container.

.xd {
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.xd li {
  display: inline;
}

.xd a {
  display: inline-block;
  padding: 5px;
  color: #080808;
}

.logo {
  width: 10%;
  height: auto;
  float: left;
}
#image1 {
position: absolute;
}

<div class="container">
<img src="http://placehold.it/80x50/fb4" id="image1">
  <div id="container-fluid">
    <ul class="xd">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="news.html">News</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li>
        <a href="map.html">Map</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>