Question

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.

Answer 1

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;
}