Placing 1 image flush left, and another flush right

HTML & CSS
1

Please, how would I place “image1” flush left, and “image2” flush right? I thought this code might work, but it doesn’t:

<HTML><BODY>
<table>
<tr>
<td align=“left”>
<img src=“image1.jpg”>
</td>
<td align=“right”
<img src=“image2.jpg”>
</td>
</tr>
</table>
</BODY></HTML>

Thank you!

2

Don’t use a table. Instead, place the images inside a DIV, assign a class to each image (or an ID if the images are unique), and then target the class/ID via CSS to float them.

Here’s an example:


<div>
    <img class="classname1" src="image1.jpg" width="250" height="100" alt="alternate text"> <img class="classname2" src="image2.jpg" width="250" height="100" alt="alternate text">
</div>

Then, in your stylesheet, target the classes so they float:


.classname1 {
    float: left;
}

.classname2 {
    float: right;
}

Obvioulsy, classname1 and classname2 are just placeholders, and should be replaced with class names that have meaning (and I don’t mean “left” and “right” since you may want to switch their positions later on). If you don’t know how to use CSS, it’s easy. The easiest way is to put it in the HEAD section, below the TITLE tag.


<title>Your Page Title</title>
<style type="text/css">
.classname1 {
    float: left;
}

.classname2 {
    float: right;
}
</style>

Of course, this does have a disadvantage. If you have multiple pages that use the same rules (let’s say this is for a header), and you change the styles, you have to go into each and every single page and edit that CSS. Fortunately, there is a better way.

Enter the link tag.


<link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen">

That link (which should have an empty space and a forward slash after media=“screen” if using XHTML) refers to an external stylesheet file with a .css extension that will handle all the style rules for you. In this case, it’s located just below the root folder (usualy html_public on Apache servers hosted on Red Hat Linux operating systems) in a folder called “styles” and is given the name “screen.css” (I prefer screen.css instead of stylesheet.css or mywebsitesname.css because it identifies the purpose of the stylesheet, as does print.css, aural.css and so on, but you don’t need to worry about those other types just yet).

To create this file, just open up a text or WISIWYG editor of your choice, write the CSS to it, and then save it with a file extension of .css instead of .html (if using Notepad, make sure the file type is set to “All Files” so it doesn’t “try to help and” add .txt to the end of the file.

Then put it on your server in a “styles” folder that’s sitting directly inside your main folder (as I said before, probably html_public) and view in a browser.

If you’re testing locally, remove the forward slash from /styles/ (so it looks like styles/ instead) and make sure the styles folder is sitting in the same place as your Web page.

3

you have to specify a width in your table line and then each td width at 50%

like this

<HTML><BODY>
<table width=“100%” cellspacing=“0” cellpadding=“0” border=“0”>
<tr>
<td align=“left” width=“50%”>
<img src=“image1.jpg”>
</td>
<td align=“right” width=“50%”>
<img src=“image2.jpg”>
</td>
</tr>
</table>
</BODY></HTML>

good luck!

4

Fan ta stic! Thank you, tchoune and Dan Schulz, very much.