title: How can I ensure the images will remain to the left of my text in an unordered list?
body: <p>I am creating a contact page and I am having difficulty keeping the contact icons directly to the left of my text in the unordered list with the contactdetails ID. Additionally, despite being floated to the left some of the list items are placed horizontally next to each other. </p>
  
  <p>Ideally I would like each list item to be on a separate line and for each image to be placed immediately to the left of the text sharing that li. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    /* CSS Document */
      
      
      
      /*****COLOR*****/
      
      body{
       background-color: blue;
      }
      
      header{
       background-color: #8DC641;
      }
      
      nav{
       background-color: #FFF;
      }
      
      nav ul li a{
       color: olive;
      }
      
      nav ul li a:hover{
       background-color: #2DC4A6;
       color: #FFF;
      }
      
      .content{
       background-color: #FFF;
      }
      
      footer{
       background-color: #FFF;
      }
      
      
      
      /*****BODY*****/
      
      body{
       background: url("../Images/bodyBackground/bodyBackground.jpg") no-repeat center center fixed;
       max-width: 100%;
       height: 100%;
       margin: 0;
      }
      
      
      
      /*****WRAPPER*****/
      
      .wrapper{
       width: 70%;
       height: 100%;  /* Height adjusts to Wrapper content */
       margin: 0 auto;
      }
      
      
      
      /*****HEADER*****/
      
      header{
       height: 120px;
       margin: 0 ;
      }
      
      #headerLogo{
        width: 110px;
       height: 90%;
        margin-left: 20px;
       padding-top: 5px;
      }
      
      #headerLogo img{
       max-height: 100%;
        border-radius: 30px;
      }
      
      
      
      /*****NAVIGATION*****/
      
      nav{
       width: 100%;
       height: 50px;
       margin: 0;
       border-top: 5px solid #3DB54A;
       border-bottom: 5px solid #3DB54A;
       font-size: 1.40em
      }
      
      nav ul{; /* Navigation menu */
        margin: 0;
      }
      
      nav ul li{
        list-style-type: none;
        float: left;
       border-right: 1px solid black;
      }
      
      nav ul li a{
       text-decoration: none;
       display: block;
       padding: 12px 20px;
      }
      
      #homenav{ /* Right border for "Home" nav button */
       border-left: 1px solid black;
       margin-left: 60px;
      }
      
      
      
      /*****CONTENT*****/
      
      .content{
       width: 100%;
       height: 600px;
       margin: 0 auto;
       text-align: center;
      }
      
      .content p{
       width: 70%;
       padding-top: 30px;
       margin: 0 auto;
      }
      
      
      
      /*****CONTACT CONTENT*****/
      
      #contactdetails{
       max-width: 400px;
       height: 600px;
      }
      
      #contactdetails ul{; /* Navigation menu */
        margin: 0;
      }
      
      #contactdetails ul li{
        list-style-type: none;
        float: left;
      }
      
      
      /***FOOTER***/
      
      footer{
       width: 100%;
       height: 50px;
       text-align: center;
       margin: 0 auto;
       border-top: 5px solid #3DB54A;
       border-bottom: 5px solid #3DB54A;
      }
      
      footer ul{
       list-style-type: none;
       margin: 0;
      }
      
      footer li{
       display: inline-block;
       margin-right: 10%;
       padding-top: 13px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
      &lt;html&gt;&lt;!-- InstanceBegin template="Templates/SiteTemplate.dwt" codeOutsideHTMLIsLocked="false" --&gt;
      
      &lt;head&gt;
      &lt;!-- InstanceBeginEditable name="doctitle" --&gt;
      &lt;title&gt;Darren's Web Assignment&lt;/title&gt;
      &lt;!-- InstanceEndEditable --&gt;
      &lt;link href="CSS/Styles.css" rel="stylesheet" type="text/css" /&gt;
      &lt;!-- InstanceBeginEditable name="head" --&gt;
      &lt;!-- InstanceEndEditable --&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
      &lt;div class = "wrapper"&gt; &lt;!--begin Wrapper--&gt;
      
       &lt;header&gt; &lt;!--begin Header--&gt;
        &lt;div id = "headerLogo"&gt;
            &lt;img src="Images/headerLogo/headerLogo.PNG" alt="Greenery-logo" /&gt;
        &lt;/div&gt;
       &lt;/header&gt; &lt;!--end Header--&gt;
      
        &lt;nav&gt; &lt;!--begin mainNav --&gt;
         &lt;ul&gt;
          &lt;li id = "homenav"&gt;&lt;a href = "index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href = "about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/nav&gt; &lt;!--end mainNav--&gt;
      
        &lt;div class = "content"&gt; &lt;!--begin Content--&gt;&lt;!-- InstanceBeginEditable name="editableContent" --&gt;
        &lt;div id = "contactdetails"&gt;
         &lt;ul&gt;
           &lt;li&gt;&lt;p&gt;&lt;img src = "Images/icons/png/houseicon.png" alt = "Address icon"&gt;23 Kingfisher Court, Werribee 3030, Victoria&lt;/p&gt;&lt;/li&gt;
           &lt;li&gt;&lt;p&gt;&lt;img src = "Images/icons/png/emailicon.png" alt = "Email icon"&gt;contact@greenery.com&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p&gt;&lt;img src = "Images/icons/png/phoneicon.png" alt = "Phone icon"&gt;0397488945&lt;/p&gt;&lt;/li&gt;
         &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- InstanceEndEditable --&gt;&lt;/div&gt; &lt;!--end Content--&gt;
      
        &lt;footer&gt; &lt;!--begin Footer--&gt;
          &lt;ul&gt;
           &lt;li&gt;&lt;a href = "about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "about.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "about.html"&gt;Site Map&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/footer&gt; &lt;!--end Footer--&gt;
      
      &lt;/div&gt; &lt;!--end Wrapper --&gt;
      &lt;/body&gt;
      
      &lt;!-- InstanceEnd --&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>