Position of elements in header

I'm trying to build my personal record in HTML, but I have a last problem to finish it.
I would like to build my header like that :

Where : TEXT SUMMARY would be the job I'm looking for
PHOTO would be my photo
NAME would be my name
PERSONNAL INFORMATIONS would be my adress, phone number...

But I haven't really find a good way to do this... When I press CTRL+ on my browser the elements go in all ways...

<header>
  <img id="profilePhoto" src="images/photo.jpg" alt="Photo de Profil">
  <div id="description">
    FIELD1<br>
    FIELD2<br>
    FIELD3<br>
    FIELD4<br>
    FIELD5<br>
    FIELD6<br>
    FIELD7<br>
  </div>

  <br><br>
  <div id="search">
    <a href="general/recherche.html">ACTUALLY LOOKING FOR A POST GRADUATE
    INTERNSHIP</a>
  </div>

  &nbsp;
  <p id="name">
    &nbsp;&nbsp;NAME
  </p>
</header>

And the .css linked to it :

/* HEADER BLOCK */
header{
    margin: 2%;
    font-size: 15pt;
    font-family: Comic Sans MS, Comic Sans, cursive;
    width : 96%;
    display: inline-block;
}

img#profilePhoto{
    height: 236px;
    width: 236px;
    float: left;
}

div#description{
    float: right;
    text-align: right;
}

div#search{
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: 25pt;
    width: 5000px;
}

p#name{
    padding: 8px;
    vertical-align: bottom;
    text-align: left;
    font-size: 20pt;
    background-color: #7E97AD;
    color: white;
    width: 100%;
    height: 20pt;
}
/*#################################*/

Can someone tell me how to do this in a good way ?