float: left;が効きません。

お世話になります。
iSaraというプログラミングスクールのサイトを模写しています。ヘッダーの「バンコクのノマドエンジニア講座」というテキストにCSSのfloat: left;を適用しようとしても回り込みができません。
どうすれば回り込みができますか？

該当のHTMLはdivタグの中にheader_textというクラス名を適用しています。divの中にpタグがある感じです。14行目から16行目です。

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>Page Title</title>
6    <link rel="stylesheet" type="text/css" href="../iSara_mosha/stylesheet.css">
7</head>
8<body>
9    <header>
10        <div class="container">
11            <div class="headerimage_container">
12                <img src="iSARA_img/isaralogo.png" alt="iSARA" class="isara_headerlogo">
13            </div>
14            <div class="header_text">
15                <p>バンコクのノマドエンジニア講座</p>
16            </div>
17            <div class="otoiawase_shiryouseikyu">
18                <a href="">お問い合わせ/資料請求はこちら</a>
19            </div>
20        </div>
21    </header>

CSS3
1body {
2    width: 1340px;
3}
4
5header .container {
6    height: 75px;
7}
8
9header .container .headerimage_container {
10    padding-left: 90px;
11}
12
13header .container .headerimage_container img {
14    height: 50px;
15    
16}
17
18.header_text {
19    float: left;
20}
21
22.otoiawase_shiryouseikyu {
23    float: right;
24    padding: ;
25}

行動規範の内容に同意します

回答1件

ベストアンサー

参考サイトはfloatで横並びにしていませんが、今回はfloatでの実装方法を知りたいということでしょうか？

iSaraを参考にするのでしたら、以下の記述ではいかがでしょうか。

CSS
1header .container .headerimage_container {
2    padding-left: 90px;
3    display: inline-block; //追加コード
4}
5.header_text {
6    /*  float: left; */ //コメントアウト
7    display: inline-block; //追加コード
8}