HTML: Как расположить элементы в заголовке?

Question

Я пытаюсь создать свою личную запись в HTML, но у меня есть последняя проблема, чтобы закончить ее.
Я хотел бы создать свой заголовок следующим образом:

Где: ТЕКСТОВЫЙ РЕЗЮМЕ будет работа, которую я ищу
ФОТО будет моя фотография
ИМЯ будет мое имя
ЛИЧНАЯ ИНФОРМАЦИЯ будет мой адрес, номер телефона ...

Но я действительно не нашел хорошего способа сделать это ... Когда я нажимаю CTRL + в моем браузере, элементы переходят во все стороны ...

    /* 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;
    }

 <br>
 <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>

Может кто-нибудь сказать мне, как сделать это хорошим способом?

Answer 1

просто поменяйте css

   header
        {
            display: row;
            min-width: 100%;
        }
        header img
        {
            display: table-cell;
            float: left;
            width: 25%;
            height: 150px;
        }
        header .right-banner
        {
            display: table-cell;
            float: left;
            width: 75%;
            height: 150px;
        }
        #description
        {
            display: inline-block;
            float: right;
            text-align: center;
            width: 30%;
            background: #729FCF;
            margin-top: 4px;
        }
        #search
        {
            display: inline-block;
            float: left;
            width: 66%;
            margin: 30px 2%;
            text-align: center;
            background: #729FCF;
        }
        
        #search a
        {
            color: #000;
            text-decoration: none;
        }
        
        #name
        {
            display: block;
            background: #f00;
            text-align: left;
        }

   <br>
    <header>
      <img id="profilePhoto" src="https://dummyimage.com/150.png/#729FCF/#000" alt="Photo de Profil">
      <div class="right-banner">
      
      <div id="description">
        FIELD1<br>
        FIELD2<br>
        FIELD3<br>
        FIELD4<br>
        FIELD5<br>
        FIELD6<br>
        FIELD7<br>
      </div>
      <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>
      </div>
    </header>