Adding an Image next to a list

HTML & CSS
1

I was wondering I am creating an HTML/CSS bookmarks page so when My browser opens it opens the .html file. in the file I have a list inside an unorginized list but I want to place an image to the right of my list in the empty space is there any way to do this without the image appering above or below the list I am really new to coding and only know a few things any help will be great thanks in advance here is the code I have for my list I left the links Blank nothing will happen when you click them http://pastebin.com/Vi9LQFT5

2

Hi there lilg1983,

and a warm welcome to these forums. :smile:

Here is just one of many possible examples…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
#container {
    display:flex;
    align-items:center; 
 }
#container ul {
    min-width:16.25em;
    padding:1em 1em 1em 3.5em;
    border: 0.1em solid #999;
    box-sizing:border-box; 
 }
#image-container {
    min-width:16.25em;
 }   
#image-container img {
    display:block;
    width:100%;
    height:auto;    
 }
@media screen and (max-width:35em) {
#container {
    display:block;
  }
 }
</style>

</head>
<body> 

<div id="container">

<ul>
 <li><a href="#">FACEBOOK</a></li>
 <li><a href="#">GMAIL</a></li>
 <li><a href="#">STEAM</a></li>
 <li><a href="#">YAHOO MAIL</a></li>
 <li><a href="#">HYPERSPIN</a></li>
 <li><a href="#">TWITTER</a></li>
 <li><a href="#">YOUTUBE</a></li>
 <li><a href="#">EBAY</a></li>
 <li><a href="#">AMAZON</a></li>
 <li><a href="#">NEWEGG</a></li>
 <li><a href="#">APPS</a></li>
 <li><a href="#">TIGER DIRECT</a></li>
 <li><a href="#">HYPERSPIN EXTRAS</a></li>
 <li><a href="#">EMU MOVIES</a></li>
 <li><a href="#">EMULATION</a></li>
 <li><a href="#">ROMULATION</a></li>
 <li><a href="#">WALLPAPERS</a></li>
 <li><a href="#">GARDENING</a></li>
 <li><a href="#">FREE STEAM KEYS</a></li>
 <li><a href="#">GOOGLE</a></li>
 <li><a href="#">HANGOUTS</a></li>
 <li><a href="#">INSTA GC</a></li>
 <li><a href="#">VUDU</a></li>
 <li><a href="#">HULU</a></li>
</ul>`

<div id="image-container">
 <img src="http://placehold.it/648x400" alt="">
</div>
<!-- #container --></div>

</body>
</html>

coothead

1 Like
3

Thank you very much for the reply this helped out alot the more I learn about html/css or coding in general it is really simple thank you again

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.