Floating Inside LI

any chance of a diagram showing how you want the list to look?

If its a two column list, I would think to use a dl.

dl {width:200px}
dt {width:98px; float:left; clear:both;}
dd {width:98px; float:right; }

<dl>
  <dt>one</dt><dd><a href="#">first link</a></dd>
  <dt>two</dt><dd><a href="#">second link</a></dd>
  ...
  <dt>last</dt><dd><a href="#">last link</a></dd>
</dl>

If you use an ordered list (ol) you shouldn't need to number the items as the ol will do that for you,

<ol>
  <li><a href"#">first link</a></li>
  <li><a href"#">second link</a></li>
  ...
  <li><a href"#">last link</a></li>
</ol>

To get all the list to display on one line, either float all the elements left, or make them display:inline.

sure. Sorry that I didn't include this in my op. I tried to do it using spaces and didn't notice that it didn't look the way I intended. I should have previewed the post!

hmm. Here's what that looks like to me:

I didn't number them in my example code!

I do think that I should use an ordered list though, because that's what the data is: a list of references. They have an intrinsic order, so ol seems to be "right" way to do it.

I guess what I'm saying is that I think the html below is correct, and I just need the css to format it.

<ol>
	<li>
		<span class="title">title one</span>
		<span class="link"><a href="/">link one</a></span>
	</li>
	<li>
		<span class="title">title two</span>
		<span class="link"><a href="/">link two</a></span>
	</li>
	<li>
		<span class="title">title three</span>
		<span class="link"><a href="/">link three</a></span>
	</li>
</ol>

Thanks again for the help.

Can't you do something simple with floats - as in float the 'title' left and the 'link' right?

css

.title {
	width:200px;
	display:block;
	float:left
}
.space {
	margin-right:5px
}
ul {
	margin:0;
	padding:0;
	list-style-type:none
}
li {
	margin:0 0 0 15px;
	padding:0 0 0 15px
}

xhtml

<ul>
	<li><span class="title"><span class="space">1.</span> title one</span> <a href="/">link one</a></li>
	<li><span class="title"><span class="space">2.</span> title two</span> <a href="/">link two</a></li>
	<li><span class="title"><span class="space">3.</span> title three</span> <a href="/">link three</a></li>
</ul>

Hi

I gave it a shot, but unfortunatly I have had to text in the numbers of the list because internet explorer placed them between the title and link parts.

To get around that I just turned off the list-style-type, the problem then was that if you switch off the style sheet you get double numbers.

To get around that I had to change the Ordered List into an Un-ordered List. Which obviously leaves a litle dot.

Not ideal but it looks the same, and it seems simple-ish.

bah, you need to zero the margins and padding for the dl list to work, just add

dl, dt, dd {margin:0; padding:0;}

the same structure will work for your ol list, in the CSS replace dt with title and dd with link. So ...

li {width:200px;}
.title {width:98px; float:left; clear:both;}
.link {width:98px; float:right; } 

margins and padding shouldn't be so critical here as the span by default won't have any. You may need to control them on the ol and li elements to ensure all browsers display the list appropriately.

Using this css:

.title {
   text-align: left;
   float: left;
}
.link {
   text-align: right;
   float: right;
} 

results in this totally messed up output in firefox and IE:

pretty weird huh

.

nope.

you missed out the clear:both on the .title. see my post above

it may work out best to do your code like this

ol {width:300px; margin:0; padding:0;}
ol li {clear: right;}
.link {float:right; width:150px;}
.title {}

the link span will need to appear before the title span within each li element. By not floating the title span you will avoid the title appearing over the top of the ol numbering.

If you my earlier code you are probably going to have to play around with margins and paddings to ensure the numbering appears in the correct place.

Bodged in opera.

ol {width:300px; margin:0; padding:0;}
ol li {clear: right;}
.link {float:right; width:150px;}
.title {}

A lot of people have thrown out ideas and I've tried them all. I don't think any of them worked exactly. Here's what I get with yours Chris:

And this other idea:

li {width:200px;}
.title {width:98px; float:left; clear:both;}
.link {width:98px; float:right; } 

sort of works in IE, but check it out: it doesn't increment the numbers! It goes, 1. 1. 1. instead of 1. 2. 3. That's hilarious! I bet you couldn't do that on purpose if someone asked for it! lol.

Anyway, it doesn't work in firefox.

Hi there

Just an idea - but why don't you do away with the "real" UL and do a fake one (i.e. 1, 2, 3 at the start of each line) and work the floating thing as per the "Splitting the Difference" ALA article at the bottom of this page: http://www.alistapart.com/articles/practicalcss/

Just checked mine in explorer opera and firefox and they all look exactly the same.

Other than having the numbers writen in it's perfect.

[Edit]

I took out 'ish' on perfect.

bingo! This works:

<style type="text/css">
.link {
   float: right;
	 width:20%
} 
</style>

<ol>
	<li>
		<span class="link"><a href="/">link one</a></span>
		<span class="title">title one</span>
	</li>
	<li>
		<span class="link"><a href="/">link two</a></span>
		<span class="title">title two</span>
	</li>
	<li>
		<span class="link"><a href="/">link three</a></span>
		<span class="title">title three</span>
	</li>
</ol>

however, take a look at this thread to see why I didn't do that to begin with.

http://www.csscreator.com/css-forum/ftopic9604.html

If nobody has a better idea, I guess I'll go with this one.

well, the only good answer that I have for that is, I was trying to do html and css the way you're supposed to do it. That is, since I had an ordered list, theoretically the html should be an ordered list and I should be able to make that look any way I want it to using only css. When you change the html in order to facilitate a particular look, you're technically violating the principle of the thing.

yes, yours does work, but see my reply above. I was just being a stickler here. Since my data was an ordered list, I was trying to use an ol.

thanks for the help though.
.

The one you have just decided on doesn't work in opera.

I'm bored now anyway. :roll:

voila!

ol, ol li {margin:0; padding:0; margin-left:2em; padding-left:2em;}

ol#titlelinks li {width:200px;}
ol#titlelinks li:after {content:'.'; display:block; clear:both; height:0; line-height:0; visibility:hidden;}
* html ol#titlelinks li {height:1px;} /* holly hack, may need hiding from IE/Mac */
.title {width:45%; float:left; }
.link {}

<ol id='titlelinks'>
   <li><span class="title">title one</span><a href="/">link one</a></li>
   <li><span class="title">title two</span><a href="/">link two</a></li>
   <li><span class="title">title three</span><a href="/">link three</a></li>
</ol>

Chris, does that work for you in IE?

for some reason, IE doesn't increment the ol numbers. you may want to do a search on IE bugs to see if its known and if there is a solution.

If you apply the Holly Hack on li or otherwise cause it to have hasLayout, list markers are screwed up. Use the hack on <a> instead. No guarantees, but it does the job on uls.

cheers,

gary

Thanks for the tip.

It doesn't need the holly hack, but without hasLayout IE moves the list numbers so they appear just to the left of the first unfloated text in the li element - which will place them under the float:left text.

I fixed that by feeding IE margin-left and padding-left values to compensate - these equate to the width of the floated element. To work the values for all three will probably need to be in px. When I tried % everything became messed up.

Anyways, here are the new styles. Page link above has been updated any now works in IE6. I suspect you will need to check IE/Mac to decide whether the IE6 margins/padding need to be hidden from it.

ol, ol li {margin:0; padding:0; margin-left:2em; padding-left:2em;}

ol#titlelinks {width:200px;}
ol#titlelinks li {margin-left:0; padding-left:0;}
* html #titlelinks li {margin-left:-70px; padding-left:70px;}
ol#titlelinks li:after {content:'.'; display:block; clear:both; height:0; line-height:0; visibility:hidden;}
.title { width:70px; float:left; }
.link {}