Logo image and H1 heading on the same line

Question

I want to create my first web page but I encountered a problem   I have the following code    lt img src  img logo png  alt  logo    gt   lt h1 gt My website name lt  h1 gt    I d like to know how to make the logo and the H1 to be in the same line  Thanks

User · Accepted Answer

As example  DEMO    HTML    lt div class  header  gt     lt img src  img logo png  alt  logo    gt     lt h1 gt My website name lt  h1 gt   lt  div gt    CSS    header img     float  left    width  100px    height  100px    background   555      header h1     position  relative    top  18px    left  10px      DEMO

User · Answer

lt head gt   lt style gt  header      color   f4f4f4      background-image  url  header-background jpeg           header img      float  left      display  inline-block     header h1      font-size  40px       color   f4f4f4      display  inline-block      position  relative      padding  20px 20px 0 0      display  inline-block     lt  style gt  lt  head gt     lt header gt   lt a href  index html  gt       lt img src    branding png  alt  technocrat logo  height  100px  width  100px  gt  lt  a gt       lt a href  index html  gt       lt h1 gt  lt span gt  Technocrat lt  span gt  Blog lt  h1 gt  lt  a gt   lt  div gt  lt  header gt

User · Answer

I d use bootstrap and set the html as    lt div class  row  gt       lt div class  col-md-4  gt           lt img src  img logo png  alt  logo    gt       lt  div gt       lt div class  col-md-8  gt           lt h1 gt My website name lt  h1 gt       lt  div gt   lt  div gt

User · Answer

in your css file do img   float  left    and h1  float  left

User · Answer

You can do it as Billy Moat told you  wrap your  lt img gt  and  lt h1 gt  in a  lt div gt  and use float  left  to float your image to the left  set the  lt div gt  width and than set a line-height for your h1 and use  lt div style  clear  float   gt  lt  div gt  to clear your floating elements   Fiddle

User · Answer

If your image is part of the logo why not do this    lt h1 gt  lt img src  img logo png  alt  logo    gt  My website name lt  h1 gt    Use CSS to style it better   And it is also best practice to make your logo a hyperlink that take the user back to the home page   So you could do    lt h1 id  logo  gt  lt a href     gt  lt img src  img logo png  alt  logo    gt  My website name lt  a gt  lt  h1 gt

User · Answer

Check this      header width 100               header img  width  20     or whatever width you like to have              header h1       display inline    It will take rest of space which left by logo

User · Answer

Steps    Surround both the elements with a container div  Add overflow auto to container div  Add float left to the first element  Add position relative  top  0 2em  left  24em to the second element  Top and left values can vary according to you

User · Answer

Just stick the img tag inside the h1 tag as part of the content

User · Answer

Try this    Put both elements in a container DIV  Give that container the property overflow auto Float both elements to the left using float left Give the H1 a width so that it doesn t take up the full width of it s parent container

User · Answer

This is my code without any div within the header tag  My goal intention is to implement the same behavior with minimal HTML tags and CSS style  It works   whois css   header-img       height  9       width  15      header       background  dodgerblue      header h1       display  inline      whois html   lt  DOCTYPE html gt   lt head gt       lt title gt  Javapedia net WHOIS Lookup  lt  title gt       lt link rel  stylesheet  type  text css  href  whois css   gt   lt  head gt   lt body gt       lt header gt           lt img class  header-img  src   javapediafb jpg  alt  javapedia net  href  https   www javapedia net   gt           lt h1 gt WHOIS Lookup lt  h1 gt       lt  header gt   lt  body gt    output

User · Answer

you can do this by using just one line code     lt h1 gt  lt img src  img logo png  alt  logo   gt My website name lt  h1 gt

User · Answer

Try this    lt img style  display  inline   src  img logo png  alt  logo    gt   lt h1 style  display  inline   gt My website name lt  h1 gt

[html] Logo image and H1 heading on the same line

Examples related to html

Examples related to css

Examples related to position

Examples related to inline