Блог

Я пытаюсь сделать левую боковую панель, заголовок рядом с ней и основной текст. Я использую для этого flexbox, но не могу понять, как это сделать. Заголовок и основной текст просто остаются под боковой панелью, а не справа. Я уверен, что это простая вещь, но я здесь уже почти час и не могу решить эту проблему.

HTML:

 <nav id="body">
        <div id="searchbox">
            
           <label class="label" for="email">E-mail:</label>
           <input name="email" id="email" type="text">
           <br>
           <label class="label" for="pass">Password:</label>
           <input name="pass" id="password" type="password">
           <button class="button">Login</button>
           <button class="button">Register</button>
           
      </div>
      
      <div id="container_head"></div>
      <div id="container_body"></div>
      
    </nav>
 

CSS:

 body {
  font-size: 62.5%;
}

/* Search box */

#searchbox {
  top: 10px;
  position: relative;
  width: 100px;
  float: left;
  order: 1;
  flex: 0 0 100%;
}

.label {
  display: block;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  color: grey;
  font-weight: bold;
  margin-bottom: 0;
}

#email {
  height: 15px;
  border: 1px solid #bdc7d8;
  padding: 3px;
  font-size: 11px;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  margin-bottom: 2px;
  width: 95px;
}

#password {
  height: 15px;
  border: 1px solid #bdc7d8;
  padding: 3px;
  font-size: 11px;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  width: 95px;
  margin-bottom: 2px;
}

.button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-white);
  font-size: 11px;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}

/* Container */

#container_head {
  background-color: var(--color-secondary);
  height: 30px;
  width: 100%;
  margin-left: 10px;
  order: 2;
  flex: 0 0 50%;
}

#container_body {
  background-color: var(--color-secondary);
  height: 350px;
  width: 100%;
  margin-left: 10px;
  margin-top: 10px;
  order: 3;
}

#body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
 

Я бы grid не стал этим пользоваться flex . Вы могли бы указать то font-family и то font-face в body единственном. Также не нужно вставлять grid его в nav метку.

 body {
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-size: 11px;
}

/* Search box */



.label {
  display: block;
  
  color: grey;
  font-weight: bold;
  margin-bottom: 0;
}

#email {
  height: 15px;
  border: 1px solid #bdc7d8;
  padding: 3px;
  margin-bottom: 2px;
  width: 95px;
}

#password {
  height: 15px;
  border: 1px solid #bdc7d8;
  padding: 3px;
  width: 95px;
  margin-bottom: 2px;
}

.button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-white);
}

/* Container */
#body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(min-content, 20%) 1fr;
}
#searchbox {
    background: yellow;
    grid-column: 1;
    grid-row: 1 / span 2
    
}
#container_head {
    background: red;
    height: 50px;
}

#container_body {
    background: blue;
} 

 <div id="body">
        <div id="searchbox">           
           <label class="label" for="email">E-mail:</label>
           <input name="email" id="email" type="text">
           <br>
           <label class="label" for="pass">Password:</label>
           <input name="pass" id="password" type="password">
           <button class="button">Login</button>
           <button class="button">Register</button>           
      </div>
      
      <div id="container_head">Header</div>
      <div id="container_body">    
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
        <p>sample text</p>
      </div>      
</div>