Image not right aligned

HTML & CSS
1

why the image is not right aligned ?

I want the text to be left aligned and image to be right aligned to the page. what changes do I need ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">

 p.headertxt {font-size: 16px; font-family: arial;margin-left:0}
 </style>
 </HEAD>

 <BODY>
 <table>
<tr>
<td>
<p class="headertxt">abdcefgh hj uiiio ipioio retsdiop wertvb poknmnnn</p>
</td>
<td >
<p>&nbsp;<img style="float:right;" src="image/Logo.JPG" /></p>
</td>
</tr>
</table>
 </BODY>
</HTML>
2

I would do it this way

  1. get rid of the <table> as it’s not required for what you want to do.

  2. create a container <div> to hold the text and the image

  3. put the text in a separate div with width = 50% and float it left in the <div> in 2)

  4. put the image in a seprate <div> with width = 50% and float it right in the <div> in 2)

Your text and image will then be left and right aligned on the page regardless of the size of the browser window.

3

This does not work

4

it does for me.

post the code that you say doesn’t work and we can help you fix it.

5

The image is right aligned to the edge of the table. If you want the image at the edge of the viewport then you need to make the table as wide as the viewport.


table{width:100%}

As Kalon said though tables are not needed at all here.:slight_smile: