HTML Code to put image in left and text in right side of screen with footer below?

html

Solution

Option 1:

For text wrapping around the image, use this basic HTML:

<div id="header">
  ... contents go here ...
</div>

<div id="content">
  <img src="sample.jpg" alt="" />
  <p>Example content</p>
</div>

<div id="footer">
  ... contents go here ...
</div>

And this CSS:

#content img {
  float: left;
}

Option 2:

For two distinct content columns, use this HTML:

<div id="header">
  ... contents go here ...
</div>

<div id="content">
  <div class="col">
    <img src="sample.jpg" alt="" />
  </div>
  <div class="col">
    <p>Example content</p>
  </div>
</div>

<div id="footer">
  ... contents go here ...
</div>

And CSS:

#content .col {
  float: left;
}

#footer {
  clear: left;
}

Problem

This is what my page should look like - ``` --------Header (will put code to load header from external site here) --Image on left side - Text on right side. --------Footer ((will put code to load footer from external site here)) ``` How can I do this? I am actually looking for a template where all I have to do is place my image, text and header and footer code.

Original source