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!