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?
Simplest solution:
<!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:
<!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