<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layOut015</title>
<style type="text/css">
*{margin:0;padding:0;color:gray}
.overflowHidden{overflow:hidden}
.bdr2{border:2px}
.b-r15{border-radius:15px}
.solid{border-style:solid}
.bdColorGray{border-color:gray}
.bgColorSilver{background:silver}
.bgColorLavender{background:lavender}
.colorWhite{color:white}
.floatL{float:left}
.floatR{float:right}
.alignLeft{text-align:left}
.alignCenter{text-align:center}
.pdg5{padding:5px}
.fEm05{font-size:0.5em}
.fEm2{font-size:2em}
.fEm3{font-size:3em}
.fEm4{font-size:4em}
.fEm5{font-size:5em}
.inlineBlock{display:inline-block}
.clearBoth {clear:both}
.hite5{height:5px}
.hite10{height:10px}
</style>
</head>
<body class="pdg5">
<div>
<div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">guest</div>
<div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">subDomain</div>
</div>
<div class="clearBoth hite5"></div>
<div class="alignCenter">
<div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">logIn</div>
<div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">dot.kr</div>
<div class="fEm5 bdr2 b-r15 bdColorGray pdg5 solid colorWhite bgColorSilver inlineBlock">search</div>
</div>
<div class="clearBoth hite5"></div>
<div class="fEm3 bdr2 b-r15 bdColorGray pdg5 solid alignCenter">
<div class="alignLeft inlineBlock">navigator > grandPom > pom 123456 7890 5555 9999 88888</div>
</div>
<div class="clearBoth hite5"></div>
<div class="alignCenter">
<div class="fEm5 floatR bdr2 b-r15 bdColorGray pdg5 solid">rMenu</div>
<div class="fEm5 floatL bdr2 b-r15 bdColorGray pdg5 solid">lMenu</div>
<div>
<div class="fEm3 bdr2 b-r15 bdColorGray pdg5 solid colorWhite bgColorSilver inlineBlock">title of contents</div>
<div class="clearBoth"></div>
<div class="fEm2 bdr2 b-r15 bdColorGray pdg5 solid colorWhite bgColorSilver inlineBlock">writer</div>
</div>
</div>
<div class="clearBoth hite10"></div>
<div class="bgColorLavender">contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents
contents contents contents contents</div>
<div class="clearBoth hite10"></div>
<div class="alignCenter">
<div class="fEm2 bdr2 b-r15 bdColorGray pdg5 solid inlineBlock">footer footer footer footer footer</div>
</div>
</body>
</html>
I have the code above at http://dot.kr/x-test/layOut/015.php.
I think that the height gap between “title of contents AND writer” is too big.
So I like to make it narrower.
The bottom line of the text box “writer” should be same as the bottom line fo the text box “lMenu” AND “rMenu”.