Как лучше сверстать такой блок?

Question

[De Slow]

Вот такой элемент
Лучше сверстать родительский, а у дочернего сделать margin-top: -?px?
Или есть вариант получше?

Comments

[iBird Rose]

margin-top: -?px нормальный вариант. только лучше делать их не родителем и чайлдом, а сиблигнами

[De Slow]

сиблигнами-родственниками?
Просто два разных дива?

[Сергей delphinpro]

iBird Rose: Lesha Weal: Тут надо макет в целом видеть и сделать так, как подскажет логика. А вот так от балды говорить "лучше делать их сиблигнами" некорректно.

[iBird Rose]

Lesha Weal: да https://jsfiddle.net/wkto0fgs/

Answer 1

[Сергей ZSA]

Можно с отрицательным margin, но потом можете словить пробелы внизу непонятные. Попробуйте разные способы. Можно translate задать отрицательный, можно top отрицательный, при этом сделать оба блока relative и обоим естественно поставить z-index, а то проблем потом с браузерами нахватаетесь, кто-то отобразит нормально, а кто-то нет (проверено в очень разных условиях).
Если синий блок фиксированной высоты - делаете его внутри черного и через absolute ставите как надо, а у черного делаете большой padding, который будет высотой до самого низа синего.

Answer 2

[Виталий]

Если вложенность не требуется

<div id="block_black"></div>
<div id="block_blue" style="width: 80%; margin: -100px auto 0 auto;"></div>

* если черный - это шапка сайте , то лучше всего background image и padding-top