Danny Shepherd Danny Shepherd - 6 months ago 12
HTML Question

Vertical aligned floated divs in responsive theme with wrapped text

I realise there are a lot of solutions for vertical alignment online, unfortunately the word-wrap in my floating right box appears to break most of the ones i've tried.

Its the footer of my document with floats left a simple "copyright company" and floats right Apple's necessarily terms and conditions for mentioning their products in small print - this info has to word wrap as the responsive sized screens get smaller - as that occurs the div gets bigger and the element floating left stops being aligned in the middle - the more I mess with the code the more confused and lost I get! Here is what I have so far... (.footend was an attempt to deploy an idea found elsewhere which worked until the word-wrap starts, so can probably be removed all together)

<div id="Footer">
<!-- FOOTER -->
<div class="content-inner footend">
<div class="left">© Company 2016</div>
<div class="right">
<img src="http://update.s3-eu-west-1.amazonaws.com/images/apple-logo.png" alt="Apple Logo" style="width:8px;">
Apple Logo, Mac, OS X, iPhone, iMac, Mac mini, Mac Pro, MacBook, MacBook Pro, MacBook Air, iOS, MacApp and Retina are trademarks of Apple Inc., registered in the U.S. and other countries.
</div>
</div>
<div class="clr"></div>
<!-- 'FOOTER -->
</div>


CSS

.content-inner {
margin: 0 auto;
max-width: 840px;
width: 100%;
}

.content-inner-600 { max-width: 600px; }
.content-inner-620 { max-width: 620px !important; border: 0px solid red; }

.footend {}
.footend:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}

#Footer {
background: #ef4935 !Important;
color: #fff;
font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
padding: 15px 0;
}

#Footer .left {float: left; width: 30%; font-size: .77em; margin-top:2px; display: inline-block;vertical-align: middle; position: absolute;}
#Footer .right {float: right; width: 40%; font-size: .6em !important; line-height: 1em; margin: 0px 20px 0 0; font-weight: 200 !important; text-align: justify; display: inline-block; vertical-align: middle;}

Answer

By simply remove the float, position: absolute and give the .left/.right a proper calculated width, vertical centering works.

Another way would be to use flexbox

.content-inner {
  margin: 0 auto;
  max-width: 840px;
}

.content-inner-600 { max-width: 600px; }
.content-inner-620 { max-width: 620px !important; border: 0px solid red; }

.footend {}
.footend:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

#Footer {
  background: #ef4935 !Important;
  color: #fff;
  font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  padding: 15px 0;
}

#Footer .left {width: calc(50% - 4px); font-size: .77em; margin-top:2px; display: inline-block;vertical-align: middle; }
#Footer .right {width: calc(50% - 24px); font-size: .6em !important; line-height: 1em; margin: 0px 20px 0 0; font-weight: 200 !important; text-align: justify; display: inline-block; vertical-align: middle;}
<div id="Footer">
  <!-- FOOTER -->
  <div class="content-inner footend">
    <div class="left">© Company 2016</div>
    <div class="right">
      <img src="http://placehold.it/50" alt="Apple Logo" style="width:8px;">
      Apple Logo, Mac, OS X, iPhone, iMac, Mac mini, Mac Pro, MacBook, MacBook Pro, MacBook Air, iOS, MacApp and Retina are trademarks of Apple Inc., registered in the U.S. and other countries.
    </div>
  </div>
  <div class="clr"></div>
  <!-- 'FOOTER -->
</div>