Criar dois "Blocos" dentro de tag pai (header)

[codercss 14]

Olá,

 

Como é que consigo dividir a tag header em duas partes, uma com 30% do seu tamanho e a segunda com 70%?

 

Vejam aqui s.f. https://jsfiddle.net/z2hjL2fd/

 

O que pretendo é colocar a imagem no lado esquerdo e o paragrafo do lado direito. Não consigo entender o porque que ele imprime a tag figure numa "linha" e a tag p noutra linha! Se repararem o texto "Mensagem" está abaixo, depois da parte inferior da imagem. Como fazo para que consiga ter dois blocos dentro da tag header?

 

Nota:

Pelo que percebi, o float faz o elemento flutuar dentro da tag pai, neste exemplo a tag header. Os filhos das tags que tem propriedade float, neste caso figure e p, irão ser ajustados dentro dessas mesmas tag's.

É correcto pensar que os filhos de figure e p respondem perante eles, e não perante a tag header?

O que pretendo exemplificar é que se caso pretenda criar uma nova tag img dentro de figure apenas me terei que preocupar com o tamanho de figure, pois o tamanho das duas tag's img irão se calculadas considerando o tamanho do pai (figure), certo?

 

Desculpe se com a minha nota acabei por confundir mais o assunto, mas digam coisas :)

Obrigado e bons códigos

[AndersonMamede 88]

Olá!

Inspecionamento a página pelo Google Chrome, dá para ver que o elemento figure possui algumas propriedades padrões (não sei se é só o Chrome que faz isso, ou se outros browsers também fazem). As propriedades são estas:

figure {

    display: block;

    -webkit-margin-before: 1em;

    -webkit-margin-after: 1em;

    -webkit-margin-start: 40px;

    -webkit-margin-end: 40px;

}

Além do mais você também adicionou margem de 5px no figure. Se você quer que os dois elementos fiquem na mesma linha, eles juntos não podem ultrapassar 100% de largura (30% + 70% + margem > 100%).