cssのレイアウトについて

box1とbox4の間にbox2(上),box3(下)を入れたレイアウトにしたいです。
floatレイアウトで試したもののbox2(上),box3(下)が横並びになってしまいました。
どのようにすれば、いいか教えて欲しいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title></title>
6  <link rel="stylesheet" href="">
7</head>
8<body>
9
10  <div id = "left_box">1</div>
11  <div id = "onTheMiddle_box">2</div>
12  <div id = "underTheMiddle_box">3</div>
13  <div id = "right_box">4</div>
14
15</body>
16</html>
17

css
1#left_box { width: 180px;
2  height: 250px;
3  border: 1px solid black;
4  float: left;
5}
6#onTheMiddle_box { width: 180px;
7  height: 125px;
8  border: 1px solid black;
9  float: left;
10}
11#underTheMiddle_box { width: 180px;
12  height: 125px;
13  border: 1px solid black;
14  float: left;
15}
16#right_box { width: 180px;
17  height: 250px;
18  border: 1px solid black;
19  float: left;
20}

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

回答2件

ベストアンサー

最小限の対応なら、下記追加

css
1#underTheMiddle_box {
2	margin: 127px 0 0 -182px;
3}
4

自分ならレイアウト用とbox用で、構造を分けます。
結構書き変えちゃいますが。

html
1<div id = "left_area">
2	<div class = "box" id="left_box">1</div>
3</div>
4<div id = "center_area">
5	<div class = "box" id="onTheMiddle_box">2</div>
6	<div class = "box" id="underTheMiddle_box">3</div>
7</div>
8<div id = "right_area">
9	<div class = "box" id="right_box">4</div>
10</div>

css
1.box {
2	width: 180px;
3	height: 250px;
4	border: 1px solid black;
5}
6#onTheMiddle_box, #underTheMiddle_box {
7	height: 125px;
8}
9#left_area, #center_area, #right_area {
10	width: 180px;
11	float: left;
12}
13
14