title: How to split webpage into "sections"
body: <p>I'm making a "contact us" page and here I have three different people to contact.</p>
  
  <p>The way I am designing this page is as such:</p>
  
  <p>......................................................</p>
  
  <p><em>Name</em></p>
  
  <p>Left hand side = Contact Details, Right hand side = picture.</p>
  
  <p><em>Next person</em></p>
  
  <p>.....................................................</p>
  
  <p>At the moment, I gave the pictures a class=profile and coded into my .css file:</p>
  
  <pre><code>.profile {
    float = right
  }
  </code></pre>
  
  <p>However all this seems to have done is pushed my image to the right, like I want it, but now all the text is all bunched up and wrapping underneath.</p>
  
  <p>I want all the pictures to be the same size (width = 700px, height - 440px) which I have coded into my html and I want this height to define the size of each "section".</p>
  
  <p>How do I go about </p>
  
  <p>a) Keeping the text to the left and not wrapping underneath and
  b) Stopping it from all bunching up?</p>
  
  <p>My initial idea was to put a load of line breaks in but I feel like there has to be a neater way in .css?</p>
  
  <p>EDIT: <a href="https://jsfiddle.net/kaish/c9kaxLLh/" rel="nofollow">https://jsfiddle.net/kaish/c9kaxLLh/</a></p>
  
  <p>Hi all, that is the link to my jsfiddle showing my HTML and .css coding.</p>
  
  <p>Since posting this, the client want a Google Map of their office instead of their profile picture so I have amended the images slightly but the same issue still holds. I want the map on the right and the contact details on the left and for each three clients I want it to be split into invisible "sections".</p>