Left floated element and unordered lists (ul).

Question

Hello, I am trying to indent the li elements of a ul. There is a left floated div with an image in it. The li element will indent only if I add left padding that is wider than the image itself.

If I float the ul left, this solves the issue, but then all elements after the ul are floated to the right of the ul.

If you would like to look at a version irl, take a look. On this page, I have given the li a background color to demonstrate.

<div class="left">
  <p ><img src='image.jpg' alt='homepage.jpg' width="360" height="395" /></p>
</div>

<p>
  Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>

<hr />

<h3>Lorem</h3>

<ul>
 <li>list element</li>
 <li>list element</li>
 <li>list element</li>
</ul>

The css:

.left {float: left; }
.left img {padding-right: 20px;}
ul li { padding-left: 10px; background: blue; }

thanks!

Answer 1

Edited to update based on OP's comment

ok, then just break it up into 2 divs nested together

ul  {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }

<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul> 
<div>
the rest now under the UL
</div>

try changing the ul li css to

ul {float:left; background: blue; }

Answer 2

try this:

li{
    margin-left:5px;
}

If you want them to go left, just put in a -##px value.

Answer 3

or you could do this:

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

and then remove all the styling from the li

Answer 4

You could assign position: relative; left: 10px; to the li. (You may additionally want to give it a margin-right: 10px;, otherwise it might become too wide on the right side.)

Or, if you want to use float for the ul -- as suggested by others -- you can probably stop the rest from floating right of the ul by using clear: left on the element that follows the ul.