Web Design Forums

MikeMackay · 01-07-2008, 07:12

I'm having one of those days and can't get this to perform as needed.

Basically I have a dynamically generated horizontal OL (fixed width of 960px) with which I'm populating the LI elements. The number of LI elements can vary per page.

What I would like is the size of the LI elements to automatically expand to fill the width of the OL. So if there are two LI's then their widths would be 480px each. Or if there were 6 items the size of the LI's would be 160px each.

Is there an easy way in CSS to accomplish this ? I'd rather not use JS if possible.

Any help would be greatly appreciated.

Shiro · 01-07-2008, 10:18

I don't think this can be done without making your CSS into a dynamic document using PHP or some other server side language. CSS at it's core doesn't work dynamically, although there are ways to kind of hack it or trick it into working dynamically.

MikeMackay · 01-07-2008, 11:03

Thanks for the reply Haku; that's the conclusion I was coming to.

I guess it'll have to be some JavaScript to dynamically set the widths :S

D'oh.

Would be useful to have a native CSS method though. Sigh.

MikeMackay · 10-07-2008, 06:35

Just because, I decided to write some JavaScript to make this work, it's online at:

Auto Expanding LI Elements

If anyone is interested...

kudos · 10-07-2008, 06:56

Couldnt think of a solution to that either, feels like there should be one though.

Good work on the script, cheers.

01-07-2008, 07:12	#1 (permalink)
MikeMackay Everything is fine. Join Date: Feb 2005 Location: Witham & London Posts: 815	auto-expanding LI elements in a list I'm having one of those days and can't get this to perform as needed. Basically I have a dynamically generated horizontal OL (fixed width of 960px) with which I'm populating the LI elements. The number of LI elements can vary per page. What I would like is the size of the LI elements to automatically expand to fill the width of the OL. So if there are two LI's then their widths would be 480px each. Or if there were 6 items the size of the LI's would be 160px each. Is there an easy way in CSS to accomplish this ? I'd rather not use JS if possible. Any help would be greatly appreciated. __________________ Mike Mackay: Web Developer - LinkedIn - FutureTweets; Easily create and schedule your Twitter posts

01-07-2008, 10:18	#2 (permalink)
Shiro shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,551	I don't think this can be done without making your CSS into a dynamic document using PHP or some other server side language. CSS at it's core doesn't work dynamically, although there are ways to kind of hack it or trick it into working dynamically. __________________ This space for rent. Dads Japan Dudes Japan

01-07-2008, 11:03	#3 (permalink)
MikeMackay Everything is fine. Join Date: Feb 2005 Location: Witham & London Posts: 815	Thanks for the reply Haku; that's the conclusion I was coming to. I guess it'll have to be some JavaScript to dynamically set the widths :S D'oh. Would be useful to have a native CSS method though. Sigh. __________________ Mike Mackay: Web Developer - LinkedIn - FutureTweets; Easily create and schedule your Twitter posts

10-07-2008, 06:35	#4 (permalink)
MikeMackay Everything is fine. Join Date: Feb 2005 Location: Witham & London Posts: 815	Just because, I decided to write some JavaScript to make this work, it's online at: Auto Expanding LI Elements If anyone is interested... __________________ Mike Mackay: Web Developer - LinkedIn - FutureTweets; Easily create and schedule your Twitter posts

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

10-07-2008, 06:56	#5 (permalink)
kudos Registered User Join Date: Jun 2008 Location: Manchester Posts: 49	Couldnt think of a solution to that either, feels like there should be one though. Good work on the script, cheers.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)