html - CSS- text moves up -


i have kind of titles on website looks this:

enter image description here

the problem appears when rezise window:

enter image description here

my text being moved , want stretch down. here html code:

            <div class="inner, header2">                 <div class="first">                      <img src="images/clean/kim_icon.png" alt="" />                 </div>                 <div class="second">                     <p class="section">s.i.m.b.a. (smart infant management , breath aid)</p>                 </div>             </div> 

and css:

.header2 { text-align: left; padding: 3em 6em 0em 6em; overflow: hidden; position: relative; }  .first { //image float: left; }  .second { //text float: left; position: absolute; bottom: 0em; left: 12em; }  p{ font-size: 2.75em; margin-bottom: 1em; line-height: 100%; margin: 0 0 2em 0; } 

an option use flexbox. text placed @ bottom possible.

.header2 {    display: flex;  }    .second {    align-self: flex-end;  }    p {    font-size: 2.75em;    margin: 0;  }
<div class="inner header2">    <div class="first">      <img src="http://placehold.it/100" alt="" />    </div>    <div class="second">      <p class="section">s.i.m.b.a. (smart infant management , breath aid)</p>    </div>  </div>


Comments

Popular posts from this blog

PHP and MySQL WP -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

go - golang pprof for c library code -