How to put an image inside article

+2 Banu Stefan · December 25, 2014
hi guys,

how can i put an image inside an article in html5?

i want the description to be on the left and the image on the right,
i want to be responsive as well to fit on all devices: tablets, smartphones etc.

Thanks.

Post a Reply

Replies

Oldest  Newest  Rating
0 Mitch Mullvain · December 26, 2014
A couple ways to do this.

First is with div's:
<article>
    <div style="float: right;">
         <img src="..." width="200" height="200" />
    </div>
    <div style="float: left;">
         <p>Description would go here.</p>
    </div>
</article>

This would need to be wrapped, so maybe a div with an id of wrapper specifying the width.

Second way to do it is with a table (my preference):
<article>
    <table>
         <tr>
              <!-- I use TH here because I like specifying the width, but you could use td and specify the width in css. NOTE: TH makes the font bold by default and it would have to be manually changed -->
              <th width="50%">
                   <p>Description would go here</p>
              </th>
              <th width="50%">
                   <img src="..." width="200" height="200"
              </th>
         </tr>
    </table>
</article>

This one is contained easier and has less hassle.

Both give you roughly the same results. And since it is simple html5, it should be compatible on most devices. Hope this helped. 
  • 1

HTML / CSS / Web Design

107,115 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators