clngn/gist:3959221

## gistfile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #navi_area {
            width: 200px;
            overflow: hidden;
        }

        .navi_child {
            float: left;
            margin: 5px;
            width: 84px;
            height: 84px;
            border: 3px solid #999;
        }

        .navi_child p {
            line-height: 84px;
            text-align: center;
            font-weight: bold;
        }

        #navi2 p {
            line-height: 21px;
        }

        #navi2 p:first-child {
            margin-top: 21px;
        }

        #navi2 p:last-child {
            margin-bottom: 21px;
        }

        #navi1 { border-radius: 10px 0 0 0; }
        #navi2 { border-radius: 0 10px 0 0; }
        #navi3 { border-radius: 0 0 0 10px; }
        #navi4 { border-radius: 0 0 10px 0; }
    </style>
</head>
<body>
<div id="navi_area">
    <div id="navi1" class="navi_child">
        <p>ほげ</p>
    </div>
    <div id="navi2" class="navi_child">
        <p>ほげほ</p>
        <p>ほげほげ</p>
    </div>
    <div id="navi3" class="navi_child">
        <p>ほげほ</p>
    </div>
    <div id="navi4" class="navi_child">
        <p>ほげほげ</p>
    </div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	#navi_area {
	width: 200px;
	overflow: hidden;
	}

	.navi_child {
	float: left;
	margin: 5px;
	width: 84px;
	height: 84px;
	border: 3px solid #999;
	}

	.navi_child p {
	line-height: 84px;
	text-align: center;
	font-weight: bold;
	}

	#navi2 p {
	line-height: 21px;
	}

	#navi2 p:first-child {
	margin-top: 21px;
	}

	#navi2 p:last-child {
	margin-bottom: 21px;
	}

	#navi1 { border-radius: 10px 0 0 0; }
	#navi2 { border-radius: 0 10px 0 0; }
	#navi3 { border-radius: 0 0 0 10px; }
	#navi4 { border-radius: 0 0 10px 0; }
	</style>
	</head>
	<body>
	<div id="navi_area">
	<div id="navi1" class="navi_child">
	<p>ほげ</p>
	</div>
	<div id="navi2" class="navi_child">
	<p>ほげほ</p>
	<p>ほげほげ</p>
	</div>
	<div id="navi3" class="navi_child">
	<p>ほげほ</p>
	</div>
	<div id="navi4" class="navi_child">
	<p>ほげほげ</p>
	</div>
	</div>
	</body>
	</html>