常連

### 前提・実現したいこと

CSSでのカラム分割に関する質問です。
親ディビジョン(float_box-wrap)の中に子(col3sp)を3つ並べて3分割のカラムを作成したく思っております。

### 発生している問題・エラーメッセージ

3分割カラムを作成するにあたり[width: calc(100% / 3)]の表記をした所、3カラム目が一段ずれたような表示になってしまいました。
![イメージ説明](d4558012bf1081c7f3123894f4f89732.jpeg)
各ブラウザにて同様の表示となっております。
試しに93%÷3にした所段がずれなくなりましたが、94%を超えるとずれが生じるため可能であれば幅100%に近づけた表示をしたくご質問いたします。

以下にCSSを記載しますので過不足などご指摘いただけますと幸甚です。

### 該当のソースコード

```CSS
#container div.float_box-wrap{
    overflow: auto;
    margin: 0 auto;
    display: block;
	box-sizing: border-box;
	background-color: #1e9cc0;
	width: 100%;
}

#container div.col3sp{
	background-color: #00b04c;
	width: 33.33%;
	width: -webkit-calc(100% / 3);
	width: calc(100% / 3);
	float: left;
	padding: 0.7em 0.5em;
	margin: 0;
	box-sizing: border-box;
}
```

【CSS】横幅100%の3分割カラムを作成しようとした所ズレ(上下)が生じてしまいました

### 前提・実現したいこと

HTML/CSSでfloatを使ってレイアウトを組んでいます。
作成したカラーボックスを隙間なく並べたいです。

### 発生している問題・エラーメッセージ

クラスbox-righttop-right(画像#ff9e6b)がうまくbox-righttop-left(画像#dbd400,#0093b7)横に回りこんでくれません。

### 該当のソースコード
![イメージ説明](8db8880e09694dc0ed966e7f5744a69b.png)
```HTML
<body>
<div class="wrapper">
  <header>
    <div class="box-top">
      <p>#141f40</p>
    </div>
  </header>

  <main>
    <div class="clearfix">
      <div class="box-left">
        <p>#80bfa8</p>
      </div>
        <div class="box-right">
          <div class="clearfix">
            <div class="box-righttop">
              <div class="box-righttop-left">
                <div class="box-righttop-left-yellow">
                  <p>#dbd400</p>
                </div>
                <div class="box-righttop-left-blue">
                  <p>#0093b7</p>
                </div>
              </div>
              <div class="box-righttop-right">
                <p>#ff9e6b</p>
              </div>
            </div>
          </div>
          <div class="box-rightbottom">
            <p>#8c2727</p>
          </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="box-bottom">
      <p>#d98d30</p>
    </div>
  </footer>
</div>
</body>

```
```CSS
.wrapper{
  width: 400px;
  margin: auto;
}

.box-top{
  width: 400px;
  height: 100px;
  background-color: #141f40;
}

.box-left{
  width: 150px;
  height: 250px;
  background-color: #80bfa8;
  float: left;
}

.box-right{
  width: 250px;
  height: 250px;
  float: right;
}

.box-righttop-left{
  width: 250px;
  height: 150px;
  float: left;
}

.box-righttop-left-yellow{
  width: 150px;
  height: 50px;
  background-color: #dbd400;
  float: left;
}

.box-righttop-left-blue{
  width: 150px;
  height: 100px;
  background-color: #0093b7;
  float: left;
}

.box-righttop-right{
  width: 100px;
  height: 150px;
  background-color: #ff9e6b;
  float: right;
}

.box-rightbottom{
  width: 250px;
  height: 100px;
  background-color: #8c2727;
}

.box-bottom{
  width: 400px;
  height: 100px;
  background-color: #d98d30;
}

.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

p{
  color: #fff;
  font-size: 3px;
  padding: 3px;
}

```
### 試したこと

- wrapperのwidthを超えないよう数値調整
- clearfixの分割
- overflow: hidden;

【CSS】floatでの回り込みが効かない

こちらの→[DIVパズル２](https://freeks-japan.blog/php/1/27/)を組み立てており、答えは下２つのコードになるそうなのですが、
答えを見てもイマイチ仕組みが理解できません。
わからない部分↓

```
      <div class="clearfix">
        <div class="green-box"></div>
        <div class="midright">
          <div class="clearfix">
            <div class="midright2">
              <div class="yellow-box"></div>
              <div class="lightblue-box"></div>
            </div>
            <div class="pink-box"></div>
          </div>
          <div class="red-box"></div>
        </div>
      </div>　
```


clearfixはわかっているつもりですが、主にクラスのmidrightやmidright2が何故必要なのかがわかりません。
まずこのパズルを組み立てるときの順序として、divでそれぞれの色のピースを作る(7色)→浮いている部分をfloatで修正するくらいの認識でいますが、考え方としてあっているのでしょうか？
clearfixが2つ出てくる理由も分からず仕舞いです。何かわかりやすい方法はないものでしょうか。



**答え↓**

```HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="../../../tools/style/reset.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>div-puzzle-pc | lesson-2</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="blue-box"></div>
      <div class="clearfix">
        <div class="green-box"></div>
        <div class="midright">
          <div class="clearfix">
            <div class="midright2">
              <div class="yellow-box"></div>
              <div class="lightblue-box"></div>
            </div>
            <div class="pink-box"></div>
          </div>
          <div class="red-box"></div>
        </div>
      </div>
      <div class="orange-box"></div>
    </div>
  </body>
</html>
```
```css
@charset "UTF-8";

/* clearfix用 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.wrapper {
  width: 400px;
  margin: auto;
}

.blue-box {
  width: 400px;
  height: 100px;
  background-color:#141f40;
}

.green-box {
  width: 150px;
  height: 250px;
  background-color:#80bfa8;
  float: left;
}

.midright {
  width: 250px;
  float: left;
}

.midright2 {
  width: 150px;
 float: left;
}

.yellow-box {
  width: 150px;
  height: 50px;
  background-color:#dbd400;
}

.lightblue-box {
  width: 150px;
  height: 100px;
  background-color:#0093b7;
}

.pink-box {
  width: 100px;
  height: 150px;
  background-color:#ff9e6b;
  float: left;
}

.red-box {
  width: 250px;
  height: 100px;
  background-color:#8c2727;
}

.orange-box {
  width: 400px;
  height: 100px;
  background-color:#d98d30;
}
```

div floatパズルの組み立て方がわからない

### 前提・実現したいこと

csvデータをgooglecolabで扱おうとしています。strがfloatに変換できません。data_transformed = mds.fit_transform(jinkou)とすると以下のエラーメッセージがでます。

### 発生している問題・エラーメッセージ

```
ValueError: could not convert string to float: 'Table 1 Population by sex:Japan， 1899-2013'
```

```ここに言語名を入力
Python
```

### 試したこと

pandasのread.csvは試しました。
使用データは人口のオープンデータです。

CSVデータ　strがfloatに変換できません。

### 前提・実現したいこと
画像①
![イメージ説明](1f662b66c5e24879f659e5d5e2d39fd4.png)
画像②
![イメージ説明](8532393752158b9b153c405d20372265.png)

画像①を模写しており、現在の状態が画像②の状態なのですが、黒丸で囲んだ部分がどうしても高さが左の文字とずれてしまいます。画像①を見ていただければわかると思いますが、黒丸で囲んだ部分と左の要素の高さは揃っています。
黒丸で囲んだ部分と、左にある要素は、”display:flex;”で横並びにしました。
Twitterアイコン等は、font awesomeを利用しました。


独学でのプログラミング学習で初めての模写でしたので、コードは載せましたが他にも必要な情報等があれば追記しますので、回答お願いいたします。


### 該当のソースコード
HTML
```ここに
<footer id="footer">
  	<br><br>
  	<div class="footer-main">
  	<div class="footer">
  	<div class="footer-1 footer-first">
  		<ul>
  			<li>企業情報</li>
  			<li><a href="#">Airbnbのご利用方法</a></li>
  			<li><a href="#">ニュースルーム</a></li>
  			<li><a href="#">株主・投資家のみなさまへ</a></li>
  			<li><a href="#">Airbnb Plus</a></li>
  			<li><a href="#">Airbnb Luxe</a></li>
  			<li><a href="#">HotelTonight</a></li>
  			<li><a href="#">Airbnbビジネスプログラム</a></li>
  			<li><a href="#">オリンピック</a></li>
  			<li><a href="#">採用情報</a></li>
  		</ul>
  	</div>
  	<div class="footer-1">
  		<ul>
  			<li>コミュニティ</li>
  			<li><a href="#">ダイバーシティ＆ビロンギング</a></li>
  			<li><a href="#">アクセシビリティ対応</a></li>
  			<li><a href="#">Airbnbアソシエイト</a></li>
  			<li><a href="#">お友達を招待</a></li>
  			<li><a href="#">Airbnb.org</a></li>
  		</ul>
  	</div>
  	<div class="footer-1">
  		<ul>
  			<li>ホスト</li>
  			<li><a href="#">お部屋を掲載</a></li>
  			<li><a href="#">オンライン体験をホストする</a></li>
  			<li><a href="#">体験をホストする</a></li>
  			<li><a href="#">責任あるホスティング</a></li>
  			<li><a href="#">リソースセンター</a></li>
  			<li><a href="#">コミュニティセンター</a></li>
  		</ul>
  	</div>
  	<div class="footer-1">
  		<ul>
  			<li>サポート</li>
  			<li><a href="#">Airbnbの新型コロナウイルスに対する取り組み</a></li>
  			<li><a href="#">ヘルプセンター</a></li>
  			<li><a href="#">キャンセルオプション</a></li>
  			<li><a href="#">近隣コミュニティサポート</a></li>
  			<li><a href="#">信頼＆安全</a></li>
  		</ul>
  	</div>
  </div>
  <br> 
  <hr class="m-0">
  <div class="footer2-3">
  <div class="footer-2">
    <pre><a href="#">Airbnb Global Services Limited
観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a>
© 2020 Airbnb, Inc. All rights reserved·<a href="#">プライバシー</a>·<a href="#">利用規約</a>·<a href="#">サイトマップ</a>·<a href="#">企業情報</a>
    </pre>
  </div>
  <div class="footer-3">
    <div class="footer-3-1">
  	  <ul>
  	    <li><p><a href="#"><i class="fas fa-adjust"></i>日本語 (JP)</a></p></li>
  	    <li><p><a href="#"><i class="fas fa-yen-sign"></i>JPY</a></p></li>
  	  </ul>
    </div>
    <div class="footer-3-1">
  	  <ul>
  		<li><p><a href="#"><i class="fab fa-facebook-f"></i></a></p></li>
  	  	<li><p><a href="#"><i class="fab fa-twitter"></i></a></p></li>
  	  	<li><p class="insta"><a href="#"><i class="fab fa-instagram"></i></a></p></li>
  	  </ul>
    </div>
  </div>
</div>
  </div>
  </footer>
```
CSS
```
#footer{
	width: 100%;
	background-color: pink;
	border-top: solid 1px gray;
}

.footer-main{
	width: 90%;
	margin: 0 auto;

}

.footer-main hr{
	width: 100%;
}

.footer{
	display: flex;
	justify-content: space-between;
}

/*
.footer-first{
	margin-left: -40px;
}
*/

.footer-1 ul{
	list-style: none;
	font-size: 13px;
}

.footer-1 a{
	text-decoration: none;
	color: gray;
}

.footer-1 a:hover{
	text-decoration: underline;
}

.footer-1 li{
	margin: 10px 0;
}

.footer2-3{
	display: flex;
	justify-content: space-between;
}


.footer-2 pre{
	color: gray;
}

.footer-2 a{
	text-decoration: none;
	color: gray;
}

.footer-2 a:hover{
	text-decoration: underline;
}

.footer-3{
	display: flex;
}

.footer-3-1 ul{
	list-style: none;
	display: flex;
}

.footer-3-1 a{
	color: gray;
}

.footer-3-1 a:hover{
	opacity: 0.5;
}

.footer-3-1 i{
	margin: 0px 10px;
}

.insta{
	margin-right: -10px;
}
```

display: flex　高さがずれてしまう。

CSSのfloatプロパティを使って、画面左側に固定サイドメニューエリア、右側にメインコンテンツを配置するサイトを制作しています。
固定サイドメニューエリアに対して　float:left
メインコンテンツエリアに対して　float:right
を適用して、左右に別れたは良いのですが、左側の固定サイドメニューの下に、float:rightを適用したメインコンエリアが入り込んできます。

下記のコードの通り、おそらくwrapperのwidth:100%、そしてその子要素であるメインコンテンツのクラスwidth:100%のなどで、画面いっぱいに広がってしまっているのだろうと疑っているのですが、左側のサイドメニュー
より右側でレイアウトを組むにはどうしたら良いのでしょうか。

わかりにくければ大変申し訳ないですが、初質問になりますのでご容赦ください。
よろしくお願い致します。
完成イメージはこちらです。
![完成イメージ](88e2b00a7e7083e9b6b0ed32bb6aeb1c.jpeg)
```
<body>
	<div class="wrapper">
		
			<div class="side_menu-all-area clearfix">
				<ul>
					<li class="side-logo"><a href="#"><img src="image/nav_logo.png" alt="サイドメニューのロゴ" class="side-menu-logosize"></a></li>
					<li class="side-midashi"><a href="#">ABOUT</a></li>
					<li class="side-midashi"><a href="#">MEMBER</a></li>
					<li class="side-midashi"><a href="#">PEOPLE</a></li>
					<li class="side-midashi"><a href="#">PROJECT</a></li>
					<li class="side-midashi"><a href="#">PRODUCT</a></li>
					<li class="contact-midashi"><a href="#"><i class="far fa-envelope"></i><span class="contact-text">CONTACT</span></a></li>
				</ul>
			</div>
		

		
		
			<div class="main-contents-right clearfix">
				
					<img src="image/top_mainvisual01.jpg" alt="メインビジュアル" class="main-img">
				


　　　　　　　　　　
				<div class="contents-all-area">
					<ul class="contents-area">
						<li class="contents-list">
							<div>
								<a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a>
							</div>

							<div>
								<p class="navy-midashi-text">テキストテキスト</p>
								<p class="midashi-text-2"><a href="#">テキストテキスト</a></p>
							</div>
						</li>
					</ul>
				</div>
					
			</div>
	</div>
	
</body>
</html>					
コード
```

```
全体に適用するwrapperのクラス
.wrapper{
	width: 100%;
}
メインコンテンツのクラス
.main-contents-right{
	float: right;
	width: 	100%;
}
画面左側に固定するサイドメニューのクラス
.side_menu-all-area{
	box-sizing: border-box;
	position:fixed;
	width: 250px;
	height: 100%;
	float:left;
	background-color: #f1f8f9;
	padding-left: 50px;
	padding-top: 50px;
	z-index: 4999；
	
}
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}
コード
```

position:fixedの下に別のコンテンツが入り込んでしまいます・・・

### 実現したいこと
float: left;でdiv要素の周りに回り込ませるようにさせたいのです。

### 発生している問題・分からないこと
float: left;で横並びになるように指定してありますが、現状きっちり二つに分かれて並んでいます。



### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="discription" content="">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<header></header>
		<main>
			<div class="box">
				<ul>
					<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
					<li>テキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
					<li>テキストテキストテキキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
				</ul>
				<div class="box-item">
				</div>
			</div>
		</main>
	</body>
</html>
```

```CSS
@charset "UTF-8";

/* =====================

共通部分

=========================*/

html {
	font-size: 100%;
}

a {
	text-decoration: none;
}

a:visited {
	color: black;
}

img {
	max-width: 100%;
}

.box {
	width: 80%;
	margin: 0 auto;
}

li {
	list-style: inside;
}


.box ul{
	float: left;
	width: 40%;
}

.box-item {
	float: left;
	width: 419px;
	height: 272px;
	background-color: gray;
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
widthが親要素より大きくならないようになど検索してわかりましたが、直してもli要素が回り込んでくれないです

### 補足
特になし

float: left;でli要素の文字をdiv要素の周りで回り込ませたい

```
float:left;で画像を三つ横並べにしたいのですが
どうしても縦に並んでしまいます。

```

### 該当のソースコード

```ここに言語名を入力
<div class="image>
<img src="#">
<p></p>
</div>
<div class="image>
<img src="#">
<p></p>
</div>
<div class="image>
<img src="#">
<p></p>
</div>
CSS


```
.image{
float:left;
width:33%
}



### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
各imageクラスの終わりに
clearを入れてcssでbothで解除してみましたが上手くいきません。

float(CSS)