SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image not right aligned

    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 ?

    Code:
    <!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. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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.
    This does not work

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by windowsxp View Post
    This does not work
    it does for me.

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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    table{width:100%}
    As Kalon said though tables are not needed at all here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •