views:

171

answers:

4

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!

A: 

What happen when you set your ul to float: left ?

Daniel A. White
Would this cause problems for content that followed the <ul>? You'd need that content to "clear" the <ul>, but not the <img>s.
David Kolar
+1  A: 

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

Konrad Rudolph
However, this will indent the whole list even if the top of it is far below the image, with unindented text flowing above it.
bobince
+2  A: 

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.

David Kolar
This seems to be the answer! There is only ever one image... my textosketch is maybe not clear on that :)
Aidan
A: 

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

nickmorss