How to have image and text side by side

Question

I m trying to have the  as shown in picture    facebook icon and text side by side  I cannot able to get that clearly   My tried code  CSS    iconDetails    margin-left 2   float left   height 40px  width 40px        container2       width 100       height auto      padding 1       HTML   lt div class  container2  gt           lt div gt               lt img src  http   ecx images-amazon com images I 21-leKb-zsL  SL500 AA300  png  class  iconDetails  gt           lt  div gt         lt div style  margin-left 60px   gt       lt h4 gt Facebook lt  h4 gt       lt div style  font-size  6em  gt fine location  GPS  coarse location lt  div gt       lt div style  float right font-size  6em  gt 0 mins ago lt  div gt       lt  div gt   lt  div gt    My JSFiddle

User · Answer

You re already doing it correctly  it just that the  lt h4 gt Facebook lt  h4 gt  tag is taking too much vertical margin  You can remove it by using the style margin 0px on the  lt h4 gt  tag   For your future convenience  you can put border  border 1px solid black  on your elements to see which part you actually get it wrong

User · Answer

It s always worth grouping elements into sections that are relevant  In your case  a parent element that contains two columns    icon text    http   jsfiddle net qMdfC 10   HTML    lt div class  container2  gt       lt img src  http   ecx images-amazon com images I 21-leKb-zsL  SL500 AA300  png  class  iconDetails    gt        lt div class  text  gt           lt h4 gt Facebook lt  h4 gt           lt p gt              fine location  GPS  coarse location              lt span gt 0 mins ago lt  span gt           lt  p gt       lt  div gt   lt  div gt    CSS           padding 0      margin 0     iconDetails       margin 0 2       float left      height 40px      width 40px     container2       width 100       height auto      padding 1      text       float left     text h4   text p       width 100       float left      font-size 0 6em     text p span       color  666

User · Answer

Use following code   jsfiddle net KqHEC   HTML   lt div class  container2  gt           lt div class  left  gt               lt img src  http   ecx images-amazon com images I 21-leKb-zsL  SL500 AA300  png  class  iconDetails  gt           lt  div gt         lt div   class  right   gt       lt h4 gt Facebook lt  h4 gt       lt div style  font-size  7em width 160px float left   gt fine location  GPS  coarse location lt  div gt       lt div style  float right font-size  7em  gt 0 mins ago lt  div gt       lt  div gt   lt  div gt    CSS    iconDetails    margin-left 2   float left   height 40px  width 40px        container2       width 270px      height auto      padding 1       float left    h4 margin 0   left  float left width 45px    right  float left margin 0 0 0 5px width 215px     http   jsfiddle net KqHEC 1

User · Answer

HTML       lt div class  containerBox  gt       lt div gt          lt img src  http   ecx images-amazon com images I 21-leKb-zsL  SL500 AA300  png  class  iconDetails  gt          lt div gt          lt h4 gt Facebook lt  h4 gt            lt div style  font-size  6em float left  margin-left 5px color white   gt fine location  GPS  coarse location lt  div gt          lt div style  float right font-size  6em  margin-right 5px  color white   gt 0 mins ago lt  div gt          lt  div gt      lt  div gt    lt  div gt    CSS       iconDetails    margin-left 2    float left    height 40px   width 40px        containerBox   width 300px  height 60px  padding 1px  background-color  303030    h4  margin 0px  margin-top 3   margin-left 50px  color white

User · Answer

remove the margin for the h4 tag  h4   margin 0px      Fiddle link  http   jsfiddle net Vinay199129 s3Qye

User · Answer

Your h4 has some crazy margin on it  so remove it  h4       margin 0px      http   jsfiddle net qMdfC 2   edit   http   jsfiddle net qMdfC 6   for the 0 minutes text  added a float left to the first div  but personally i d just combine them  although you may have reasons not to

[html] How to have image and text side by side

Examples related to html

Examples related to css