Aligning header in CSS with logo image

Question

I have this header that i've been working on trying to align it correctly has been a nightmare for me. I'm a CSS noob and here is what i have so far i don't know if im just not calling the right css tags or something but i can never get the header/image to align correctly. Can anyone here help me with this?

HTML:

<div class="header">
  <img src="css_images/seal2.png"/>
  <div class="title_print">
   <strong>THE BILLS OMAHA COUNTY GOVERNMENT</br>
    OFFICE OF THINGS AND ACCOUNTANTS</br>
  </strong> 
  </div>
    <div class="form_title">
      insert form title here
    </div>
    <div class="reporting_period">
      REPORTING PERIOD: January 1, __________, through December 31, __________
    </div>
  </div>

CSS:

    header {
        display: block; 
    }
    header{
        text-align: center;
        top: 0;
        float:left;
        padding-left: 40px;
    }
    img{
        text-align: center;
        top: 0;
        float:left;
        padding-left: 40px;
    }
   .form_title{
        text-align: center;
        top: 0;
        float:left;
        padding-left: 80px;
   }
   .title_print, .reporting_period{
        text-align: center;
        top: 0;
        float:left;
   }

EDIT:

I basically need it so that the title_print, form_title, and reporting_period comes right next to the logo and theyre all aligned in the middle and come in line by line

Answer 1

You only need to float the image to the left.

Keep the three block elements in the flow (do not float them) and the text will align to the center as you need.

Depending on the height of your image, you may need some minor adjustments to left margins to prevent the text from wrapping under the image depending on the look that you need.

 header { display: block; /* This is the default, not needed */ text-align: center; top: 0; float: left; padding-left: 40px; } img { text-align: center; top: 0; /* Not needed... */ float: left; padding-left: 40px; } .form_title { text-align: center; padding-left: 80px; /* Do you need this? */ } .title_print, .reporting_period { text-align: center; } 

 <div class="header"> <img src="http://placehold.it/100x200" /> <div class="title_print"> <strong>THE BILLS OMAHA COUNTY GOVERNMENT</br> OFFICE OF THINGS AND ACCOUNTANTS</br> </strong> </div> <div class="form_title"> insert form title here </div> <div class="reporting_period"> REPORTING PERIOD: January 1, __________, through December 31, __________ </div> </div>