How can i get List items to stay together using CSS?

Question

The skeleton of the HTML is this

<div class="TwoCol">
<img src="imgurl"/>
<h1>A headline</h1>
<p>Some exciting text</p>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>More riveting text </p>
</div>

The CSS is

.TwoCol img{
    float:left;
    padding-right:5px;
    border:none;
}
.TwoCol ul{
list-style-type:none;
}

The effect I am after is an image top left within my div with text to the right, if the text is longer than the image it wraps around under the image.

HOWEVER if the list starts to the right of the image, I want all the items to be aligned vertically below each other, not for list items below the image to appear under the image and break the list into two sections.

I need an image sketching utility :)

This

IMG Headline
IMG Para1
IMG Item A
    Item B
    Item C
Para2

not This

IMG Headline
IMG Para1
IMG Item A
Item B
Item C
Para2

Thanks!

Answer 1

You could set the <ul> to

display: inline-block;

You might also want to clear: left; your images, since it's possible that they could start stacking up next to each other depending on the other content.

Answer 2

Add a margin-left to your ul that is the width of the image (or a bit more).

Answer 3

id say set the image as a background-image and then give the ul or li a margin-left. make sure you have reset the padding and margin to 0 prior or the output will differentiate cross browser