CSS Float Floating an image to the left of the text

Question

For each post box  I want the thumbnail to float to the left and the text to float to the right  I do not want the thumb to wrap around the text   Here is my html code    lt div class  post-container  gt                      lt div class  post-thumb  gt  lt img src  thumb jpg    gt  lt  div gt      lt div class  post-title  gt Post title lt  div gt      lt div class  post-content  gt  lt p gt post description description description etc etc etc lt  p gt  lt  div gt   lt  div gt    I ve tried a few ways and still can t get it to work    the text won t show on the right     Here s my CSS code    post-container      margin  20px 20px 0 0        border 5px solid  333      post-thumb img       float  left      clear left      post-content       float right

User · Answer

Just need to float both elements left    post-container      margin  20px 20px 0 0        border 5px solid  333      post-thumb img       float  left      post-content       float  left      Edit  actually  you do not need the width  just float both left

User · Answer

x000D   x000D   post-container  x000D      margin  20px 20px 0 0    x000D      border 5px solid  333  x000D      width 600px  x000D      overflow hidden  x000D    x000D   x000D   post-thumb img   x000D      float  left  x000D      clear left  x000D      width 50px  x000D      height 50px  x000D      border 1px solid red  x000D    x000D   x000D   post-title   x000D       float left     x000D      margin-left 10px  x000D    x000D   x000D   post-content   x000D      float right  x000D    x000D   lt div class  post-container  gt                  x000D      lt div class  post-thumb  gt  lt img src  thumb jpg    gt  lt  div gt  x000D      lt div class  post-title  gt Post title lt  div gt  x000D      lt div class  post-content  gt  lt p gt post description description description etc etc etc lt  p gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    jsFiddle

User · Answer

Is this what you re after    I changed your title into a h3  header  tag  because it s a more semantic choice than using a div    Live Demo  1 Live Demo  2  with header at top  not sure if you wanted that   HTML    lt div class  post-container  gt                       lt div class  post-thumb  gt  lt img src  http   dummyimage com 200x200 f0f fff    gt  lt  div gt       lt div class  post-content  gt           lt h3 class  post-title  gt Post title lt  h3 gt           lt p gt post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc  lt  p gt      lt  div gt   lt  div gt    CSS    post-container       margin  20px 20px 0 0        border  5px solid  333      overflow  auto    post-thumb       float  left    post-thumb img       display  block    post-content       margin-left  210px    post-title       font-weight  bold      font-size  200

User · Answer

Check out this sample  http   jsfiddle net Epgvc 1   I just floated the title to the left and added a clear both div to the bottom

User · Answer

Set the width of post-content and post-thumb so that you get a two-column layout

User · Answer

Solution using display  flex  with responsive behavior   http   jsfiddle net dkulahin w3472kct  HTML    lt div class  content  gt       lt img src  myimage jpg  alt      gt       lt div class  details  gt           lt p gt Lorem ipsum dolor sit amet    lt  p gt       lt  div gt   lt  div gt    CSS    content      display  flex      align-items  flex-start      justify-content  flex-start     content img       width  150px     details       width  calc 100  - 150px      media only screen and  max-width  480px         content           flex-direction  column             details           width  100

User · Answer

I almost always just use overflow hidden on my text-elements in those situations  it often works like a charm      post-container    margin  20px 20px 0 0   border 5px solid  333     post-thumb img    float  left     post-content    overflow hidden

[html] CSS Float: Floating an image to the left of the text

Examples related to html

Examples related to css

Examples related to css-float