How to place image next to text CSS

Question

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.com/fmky4f

This is what I would like it to look like after placing it. https://prnt.sc/fmkk0a

This is my code:

 .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; } 

 <div class="container"> <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> 

Now I tried just simply putting in the image with the .logo class properties, but they don't seem to do the job as intended.

Answer 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> 

Answer 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>