html css imgの横にh1を改行して表示

質問

お世話になります。
ヘッダーにロゴとサイト名を入れたいと考えています。
サイト名はテキストで入れたいです。また、長いので一度改行したいです。
h1をインライン要素にして並べたのですが、サイト名の一段目はロゴの横にきますが、二段目はロゴの下に回り込んでしまいます。
どうしたらよいでしょうか？
（スマホからなので詳しく記述できません）
よろしくお願いします。

〈img〉〈h1〉サイト名〈br〉サイト名二段目〈/h1〉

回答No.2

sech1152

No.1 です。

補足について。

>h1にbrを使って良いのか
に関しては、htmlの厳密な規定については、それほど詳しくはないですが、文法的（技術的？表示的？）には問題ないと思っています。

文法的には問題なくても、brの本来の使用目的から見てどうなのかについては、テキストの内容的にそこで改行する意味があるなら使うべきだけれども、ただ長くなりすぎるからというだけでは使うべきではない、ということなんだと思います。

http://www.html5.jp/tag/elements/br.html
このページは、
>br 要素は、詩や住所のように、実際にコンテンツの一部をなすような改行に対してのみに使わなければいけません。
とあります。

とはいっても、実務上は理念ばっかり言っていてもうまくいかないことがあるわけで、私も、あまり気にせず使ってしまいますよ。

回答No.1

sech1152

色々なやり方があると思いますが、

<img src="・・・" style="float:left;">
<h1 style="float:left;">サイト名<br>サイト名二段目</h1>
<p style="clear:both;">次の文章</p>

みたいな感じですかね。
これ以外の、h1をインライン要素にする指定などはしていませんが、ロゴの大きさとの関係によっては、h1のmarginは調整しないといけないかもしれません。
cssで色々設定してあると、そのほかにも追加の指定が必要になるかもしれません。

また、続く要素の最初のものに、style="clear:both;"を入れておかないと、それも、ロゴやサイト名の横にきてしまう可能性がありますので注意してください。

お礼

imgやh1にもfloatって使えるんですね。divを勉強しているときに出てきたのでてっきりdivにしか使えないと思っていました。
回答ありがとうございました。

補足

h1にbrを使って良いのかちょっと悩んでるんですが気にしなくていいものですかね？