View Full Version : expanding inline element?

11-08-2010, 02:43 AM
is there any way to make an inline or inline-block element "expand" to fill the remaining width on the same line?

the behavior can be achieved quite easily with a table row and cell; in fact, this is the default behavior.

i've been working with css layouts for years and this has to be the single most annoying problem other than (the similar) non-expanding heights (equal height columns) and of course IE*

always run into a need for this when creating horizontal ul/li nav menus with a dynamic amount of buttons that need to all fit into the fixed width of the ul. i'm always having to write backend code that counts the buttons and barfs out the needed css width percentage for the li's.


11-08-2010, 03:01 AM
The magic words are: display:block;
Works with most inline elements.

Chris Hick
11-08-2010, 03:03 AM
Beat me to it DrDOS XD lol

11-08-2010, 03:23 AM
block level elements fill their own entire line. they do not fill the rest of the current line.

11-08-2010, 03:54 AM
Upon re-reading I see what you want. The word "expand" threw me off, you want them to share the space on the line.


Look at the item 'display' to see some of the table like properties than can be applied. I've never tried applying them to ul or li, and have no idea how good browser support will be for them.