Inline Block Elements

August 9, 2007 6:58 AM

HTML / CSS Gurus. I have a TABLE with a bunch of dynamic columns. The table may have 4, 7, or 20 columns. Each table column HEADER ( TH tag ) contains two inline elements, 1) a tiny image icon for sorting, and 2) a column description in text. I would like these two elements to sit next to each other and NEVER ON SEPARATE LINES, essentially putting them into an inline-block. Unfortunately, if the text in the corresponding TD tags are below a certain width, the browser will force the width of the column, and subsequently force the two inline elements of the TH onto two different lines. How can I prevent this from happening in IE & Firefox without explicitly declaring the width of the columns. I have to use a IMG element for my icons, and not a css background-image.
posted by kaizen to computers & internet (8 comments total)

Could you absolutely position the img element within the TH?

Or even set a min-width and float the img to the right. that's how I would probably tackle it.
posted by twistedonion at 7:13 AM on August 9, 2007

off the top of my head: you could left justify the text, and set the image to be the background of the TH. Have two css classes determine the background, like

ascendSort: {background-image: url(upArrow.png) background-position: right}
descendSort: {background-image: url(downArrow.png) background-position: right}

posted by boo_radley at 7:13 AM on August 9, 2007

I'd add white-space: nowrap; to my TH CSS. (Not sure how well-supported that is, though.) Or you could try setting the min-width for the columns, but I think you need to add some work-arounds to get IE to use it.

If that doesn't work, can you put a non-breaking space ( ) between the two elements instead of a regular space or wrap everything between <nobr>? Those are what I would have done in my pre-CSS days.
posted by belladonna at 7:20 AM on August 9, 2007 [1 favorite has favorites]

Clarification: "for sorting" means that the image is clickable, such that clicking it changes the sort order, which is why you can't make it a CSS background image? If so, I think you can actually make this work as a background image after all.

Place the image as the background for the column title text, give the title text a left margin wide enough that it doesn't overlap the image, make the whole thing clickable. Use DHTML to change the background image from up arrow to down arrow on click by redefining the link class.

You potentially solve your problem and increase the clickable target area all in one shot.
posted by caution live frogs at 7:24 AM on August 9, 2007

caution live frogs - close, but not close enough. Each column is also draggable, so you can re-sort the ORDER of the columns. So the TH tag's click / mousedown event is assigned to handling the drag. I am then using the sorting IMG's click event to perform sorting of the columns contents. That's why a background image will not work in this example.
posted by kaizen at 7:31 AM on August 9, 2007

simple [th nowrap] should work, if white-space: nowrap doesn't (that is, just put it in the th definition, like you would width= or height=
posted by RustyBrooks at 7:39 AM on August 9, 2007

I understand you've got what you're looking for, but to sell the background image, you could give the TH an onclick handler, or wrap your label in a span or div.

white-space nowrap is pretty darn elegant, tho.
posted by boo_radley at 9:23 AM on August 9, 2007

Don’t you just want the icon and the first word of the header text to stay together? If so, use a nonbreaking space.
posted by joeclark at 1:06 PM on August 9, 2007