Narrowing the height gap between title and writer

<!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”.

The “clearBoth” div is causing it to clear the bottom of the lMenu and rMenu boxes. I’m out of practice with CSS so removing that div doesn’t fix the problem, just wraps ‘writer’ onto the same line as ‘title of contents’.

Hi,

The bottom line of the text box “writer” should be same as the bottom line fo the text box “lMenu” AND “rMenu”.

If you remove the clear:both as mentioned above then “writer” will rise up as far as it can. Is that not what you meant?

Yes, that’s what I meant. Thank you Paul O’B as always and droopsnoot.