Как сверстать header?

Question

[Alex_Zamazan]

Всем доброго времени суток.
Заранее прошу прощения за глупый вопрос.
Возникли трудности при изучении вёрстки дивами. С теорией ознакомился, но хотел бы увидеть код того, как это должно выглядеть.
к примеру, такой хедер : pixs.ru/showimage/Noviytoche_5038289_19377414.jpg .
К сожалению, не могу сообразить, как именно нужно использовать дивы и как их позиционировать, чтобы он отображался корректно, примерно как на данной схеме, чтобы ничего не съезжало.
Заранее большое спасибо.
с уважением, Александр

Answer 1

[Денис Букреев]

грубо накидал резину)
codepen.io/anon/pen/KdBJew

HTML:

<header>
  
  <div class="logo">
    <h1>Logo</h1>
  </div>
  
  <div class="right-header">
    
    <div class="name">
      <h2>name</h2>
    </div>


    <div class="description">
      <p>description</p>
    </div>
    
  </div>
  
</header>

CSS:

header {
  position: relative;
  width: 100%; height: 200px;
  outline: 2px solid #000;
}
header, header * {
  padding: 0;
  margin: 0;
}

.logo {
  position:absolute;
  outline: 1px solid #000;
  width: 200px; height: 200px;
}

.right-header {
  position: absolute;
  right: 0; top: 0;
  width: calc(100% - 200px);
}
  .name {
    width: 100%;
    height: 70px;
    outline: 1px solid #000;
    right: 0; top: 0;
    text-align: center;
  }
  .description {
    width: 100%;
    height: 130px;
    outline: 1px solid #000;
    right: 0; top: 0;
    text-align: center;
  }

Answer 2

[dm]

HTML

<header class="header clearfix">
	<div class="left"></div>
	<div class="right-top"></div>
	<div class="right-bottom"></div>
</header>

CSS

.left {
	float: left;
	width: 33%;
	height: 300px;
	background: green;
}
.right-top,
.right-bottom {
	float: right;
	width: 67%;
}
.right-top {
	height: 100px;
	background: red;
}
.right-bottom {
	height: 200px;
	background: blue;
}
.clearfix::after {
	display: block;
	content: '';
	clear: both;
}

Answer 3

[zooks]

Прочтите две статьи и поймете:
Поток документа
CSS Flex

Answer 4

[Alex_Zamazan]

Прошу прощения за длительный ответ - огромное Вам спасибо! Хорошего дня!