2

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.

wattostudios
  • 8,666
  • 13
  • 43
  • 57
html boy
  • 51
  • 1
  • 1
  • 5
  • Should the text wrap around the image or should they be two distinct columns? – 2C-B Nov 20 '12 at 01:26
  • @2C-B - the text should be on the right side of the image, ie two distinct columns. Anyway, i dont know what wrap around means. – html boy Nov 20 '12 at 01:30
  • Can we do this without CSS ? I never did CSS before. I am not doing a web dev job, just want a page, quick, simple and easy. – html boy Nov 20 '12 at 02:42
  • Without CSS you would have to use tables. Everything else must be styled with CSS. In fact, CSS is great, you should go learn it. :) – Felix Guo Nov 20 '12 at 05:56
  • @MrXenotype - can i put css in my html code ? – html boy Nov 20 '12 at 08:41
  • Yes, CSS is practically integrated into HTML. CSS(Cascading Style Sheets) allows coders to have more control over styling elements in HTML. If you follow 2C-B's answer down below, just put the CSS in `` tags in the `` section of your page. – Felix Guo Nov 20 '12 at 16:33
  • Look at this page for some guidance: http://w3schools.com/css/css_howto.asp – 2C-B Nov 20 '12 at 20:08

4 Answers4

6

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;
}
2C-B
  • 3,457
  • 1
  • 18
  • 22
  • what is this css ? does it work if put inside an HTML page ? – html boy Nov 20 '12 at 04:29
  • Take a look at this page: http://w3schools.com/css/css_howto.asp Perhaps work through some of the tutorials. It will provide you with a reasonable starting point. – 2C-B Nov 20 '12 at 20:17
0

You could use a table like this:

<table style="width:100%">
<tr> 
    <td colspan="2">
    HEADER HERE
    </td>
</tr>
<tr>
    <td style="width: 70%">IMAGE</td> <-Change these to respective widths
    <td style="width: 30%">TEXT</td>
</tr>
<tr> 
    <td colspan="2">
    FOOTER HERE
    </td>
</tr>

</table>
Felix Guo
  • 2,700
  • 14
  • 20
  • 2
    Tables should not be used for layout! – 2C-B Nov 20 '12 at 01:23
  • Tables are perfectly fine to be used for layout. I find them easy to use and easy to configure. – Felix Guo Nov 20 '12 at 01:24
  • 3
    Tables are not perfectly fine for layout. Tables are by specification intended for tabular data only. There are many other tags that are more suitable for layout. Also, using tables for layout is detrimental to web accessibility. – 2C-B Nov 20 '12 at 01:28
0

Don't use tables. Have a look at this fiddle http://jsfiddle.net/2sWrF/1/

You use css to float the image and text so they are side by side

the .cf in the css is a clearfix it makes it so that the footer will go underneath the div with the image and text instead of being to the side of it

powerc9000
  • 2,030
  • 19
  • 30
0

Or, you can use responsive layout http://jsfiddle.net/PSBtr/12/ Iframe as a ebbedded page.

iframe

Adoptive grid as a markup.

Vitalyp
  • 1,069
  • 1
  • 11
  • 20