SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Separate image alignment

    How can I align my image to the right in this situation? Right now I am using text align on the <div> to center everything within. I get why everything centers becuase they are all by default inline element. I am able to target p, h1, h2 etc but not the <img>, that is different an only changes by the CSS properties of the div wrapping it. So what should I do here?
    troubleshooting.zip

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Simplest solution:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Image alignment</title>
        <style>
        	#elixirs{
        		text-align: center;
        		width: 200px;
        	}
        	.specialImg{text-align:left}
         </style>
      </head>
      <body>
      	<div id="elixirs">
          <h2>Weekly Elixir Specials</h2>
    	  <p class="specialImg" ><img src="yellow.gif" alt="Lemon Breeze Elixir"></p>
    	  <h3>Lemon Breeze</h3>
    	  <p>
    	    The ultimate healthy drink, this elixir combines
    	    herbal botanicals, minerals, and vitamins with
    	    a twist of lemon into a smooth citrus wonder
    	    that will keep your immune system going all
         day and all night.
    	  </p>
      	</div>
      </body>
    but maybe this is the layout you were hoping for:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Image alignment</title>
        <style>
        	#elixirs{
        		width: 180px;
        		padding:9px;
        		border:1px solid pink;
        	}
        	#elixirs h2{text-align: center; margin-top:0}
        	.specialImg{float:left;margin:0; padding:0 }
        	#elixirs h3   {overflow:hidden;  padding:0 10px; }
         </style>
      </head>
      <body>
      	<div id="elixirs">
          <h2>Weekly Elixir Specials</h2>
    	  <p class="specialImg" ><img src="yellow.gif" alt="Lemon Breeze Elixir"></p>
    	  <h3>Lemon Breeze</h3>
    	  <p>
    	    The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night.
    	  </p>
      	</div>
      </body>
    hope that helps


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
  •