CSS Placement on Web Page - html

Question

+-------------------------------------------------------------------------------+
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** PPPPPPPPPPPPPPPPPPPPPPPPPPP |
|*************** |
|TTTTTTTTTTTTTTTTTTTTTTTT |
| |
|-------------------------------------------------------------------------------+
Sorry for the sketch here. I tried to attach a screen shot, but I couldn't get it to show up. (I'll try to fix it later on another computer if this doesn't explain enough)
EDIT: This might help visualize it... http://jsfiddle.net/T3y6E/embedded/result/
I have a <div> on a personal web page I am working on. The * represent an image placement. The "H" represent a title placement. The "T" represent a slogan placement. I am trying to move the slogan over so that it is directly below the Title (wanted placement represented by "P")
Here is my HTML for this portion of the page:
<div class="logo-image">
<img src="~/Images/Atlas.png" height="125" width="150" alt="Atlas Logo" />
<img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
<div style="color:#FFF">*A southpaw's approach to bowling*</div>
</div>
Here is css that affects it:
.logo-image {
float: left;
margin: 0px 20px 0px 0px;
}

Answer 1

The effect you're looking for is float. It must be applied to the element you want to be floating, in this case the first image. And the element (with float) must be placed before the element you want it to float from, in your case the title and slogan.
I've created a fiddle with your code to show the concept: http://jsfiddle.net/3xV5Z/1/
Just a reminder: Your slogan is too big. Float won't work well with it if you don't manage your images width.

Answer 2

My answer is very similar to LcSalazar's. It uses your css.
<div>
<span class="logo-image">
<img src="http://placekitten.com/150/125" height="125" width="150" alt="Atlas Logo" />
</span>
<img style="vertical-align:top" src="http://placekitten.com/820/85" height="85" width="820" alt="Atlas Logo" />
<div>*A southpaw's approach to bowling*</div>
</div>