CODEWITHSUNDEEP
csslistlayoutstyling
Loofer
Loofer

Reputation: 6963

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

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!

Upvotes: 2

Views: 1531

Answers (3)

nickmorss
nickmorss

Reputation: 621

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

Upvotes: 0

David Kolar
David Kolar

Reputation: 3485

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.

Upvotes: 3

Konrad Rudolph
Konrad Rudolph

Reputation: 545915

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

Upvotes: 1

Related Questions