title: Aligning text side by side in different divs
body: <p>I'm new to web design and I'm making a website as a project for my friend. I've got two divs with different content in each div, one for the main content and one for news and other things which I want at the side.</p>
  
  <p>I've sorted the content div out and thats fine its where I want it. But when I go to float the news div right it goes from under the content div (Inside the wrapper div still) to out side the wrapper div but to where I want it. (I know this because for now I've got a blue border round so I can make sure everything is inside where I want it to be.)</p>
  
  <p>Heres my code and css:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="style/style.css" type="text/css"&gt;
  &lt;title&gt;Bake Away&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src="img/logo.png"&gt;
  &lt;img src="img/ad_bar.png"&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="navBar"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Responsibility&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Working With Us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="images"&gt;
  &lt;img src="img/scroll_1.png"&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  &lt;span&gt;Welcome to the Bake Away Bakery, here you can find out about
  all the wonderful things we bake. How you can place orders, who we
  bake for, where we're based, apply for jobs and contact head office.&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="news"&gt;
  &lt;h3&gt;Latest news:&lt;/h3&gt;
  &lt;span&gt;We've just started our new line of cakes that should
  hit the shelves by Monday.&lt;/span&gt;
  &lt;span class="read"&gt;Read More&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  body{
  margin:0;
  padding:0;
  width:100%;
  background-color:#E6E6E6;
  font-family:consolas;
  font-size:16px;
  font-weight:normal;
  text-align:center;
  }
  img{
  margin-top:5px;
  margin-right:15px;
  }   
  #wrapper{
  width:1000px;
  border:1px solid blue;
  margin:3px;
  margin-left:13px;
  text-align:left;
  }
  #navBar{
  color:white;
  margin:2px;
  margin-right:43px;
  height:50px;
  font-size:25px;
  font-weight:bold;
  float:center;
  text-align:center;
  }
  #navBar ul{
  list-style-type:none;
  }
  #navBar li{
  display:inline;
  }
  #navBar a{
  text-decoration:none;
  background-color:#BDBDBD;
  color:black;
  padding:2px;
  }
  #navBar a:hover{
  text-decoration:underline;
  background-color:#FE2E2E;
  color:white;
  }
  #images img{
  margin-left:50px;
  }
  #content{
  width:450px;
  margin-left:7px;
  margin-bottom:3px;
  font-size:16px;
  }
  #news{
  width:300px;
  }
  </code></pre>