Page 1 of 2

CSS to stop text wrapping under heading

Posted: Mon Jul 09, 2007 7:02 am
by Stryks
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I'm trying to present some data, but as usual, I'm trying to minimise the markup required.

I feel justified in using a table for the layout for a change, and the presentational gear is kept separate, but I still am having trouble getting the look I am after.

Heres the markup:
[syntax="html"]
<table class="general_style" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th scope="col">Widget Name</th>
		<th scope="col">Option&nbsp;1</th>
		<th scope="col">Option&nbsp;2</th>
		<th scope="col">Option&nbsp;3</th>
	</tr>
	<tr>
		<td><span>Item 1</span><span>Description goes here and goes on and on and on and on and on and on and on</span></td>
		<td>$75.00</td>
		<td>$90.00</td>
		<td>$110.00</td>
	</tr>
	<tr class="alt">
		<td><span>Item 1 & 2 Kit </span><span>Description goes here and goes on and on and on and on and on and on and onand on and on and on and on and on and on</span></td>
		<td>$75.00</td>
		<td>$90.00</td>
		<td>$110.00</td>
	</tr>
	<tr>
		<td><span>Item 2</span><span>Description goes here and goes on and on and on and on and on and on and on</span></td>
		<td>$75.00</td>
		<td>$90.00</td>
		<td>$110.00</td>
	</tr>
</table>
Not that it matters much, but here is the relevant CSS:

Code: Select all

table.general_style {
	width: 100%;
	font-size: 110%;
}

table.general_style th {
	background-color:#FFFFCC;
	color: #2D822F;
	font-size: 110%;
}
table.general_style th, 
table.general_style td {
	padding: 8px 10px;
	text-align: left;
	border-top: 1px solid #CCCCCC;
	vertical-align: top;
}
table.general_style .alt {
	background: #EFEFEF;
}
Now for the problem.

You can see I used a span in the Widget Name column, what I was trying for was a way to have the first span sit at the top of the row, at whatever width it is, and for the second span to wrap but not back under the first span.

On a single row, it would have the appearance that each span was a column on a table with just a few words in the first column and enough text to wrap in the second.

So why not just do this? Well ... the description text is often quite long, the headings vary in width, and there are usually 20 - 30 rows in the table. Frankly, I just cant waste the space on a short titled row when the cell is padded to the longest.

Besides, it just looks so much easier to understand when it goes from a nice strong heading to a smaller text description that flows straight on from the titles in a non-uniform way, as opposed to a lined up column of descriptions.

Sadly, the current solution is to nest a secondary table into the first cell of each row, but frankly I just don't find it acceptable. A single table containing 30 nested tables ... I mean, come on. They aren't nested in depth at least, but even with presentation stripped bare it's still a depressing sight.

Can anyone help out with a clean semantic markup and CSS combo for this? I've been messing around with floating div's and assorted other approaches without any luck for ages (even resorting to spans, which I never get to work the way I want), so any help would be hot.

Cheers


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Mon Jul 09, 2007 7:07 am
by superdezign
This sounds like tabular data, so divs wouldn't make sense. And so you know, I've no idea what you are asking. Doesn't make any sense to me. :P

What's wrong with the table? Tables are designed to 'fit' the content within them.

Posted: Mon Jul 09, 2007 7:08 am
by matthijs
I'd use a definition list. Semantically, it's a term with a description, isn't it? And then float the dt to the left and the dd to the right.

Code: Select all

dl {}
dt { float:left;width:20%; }
dd { float:right:width:79%; }

Posted: Mon Jul 09, 2007 7:54 am
by Stryks
Meh ... I cant describe it.

Here is a link to an example

They're somewhat adjusted to show what I mean, but it should give the idea. The first table is what I have as a basis for the CSS version, The second is the "per column" layout, and the third is what I had in mind. See how there is a definite border between the titel and the description, but the descriptions don't line up with each other?

Before you reply with "Why would you want to do that?", can you tell me if there is a relatively simple way of actually doing it? I can evaluate the why after I see how it compares visually with real data.

Cheers

Posted: Mon Jul 09, 2007 8:07 am
by superdezign
Why would you want to do that? :P

Just make it all a table except for the first two columns. Give the first column an overflow:hidden attribute, but don't give it a definite width. Float them against each other, and you should be good to go.

Edit: A better looking solution would be to put them both in the same cell, have the heading, and then the description.
Heading
Description

Posted: Mon Jul 09, 2007 8:27 am
by Stryks
No, I said *before* you say that.

Seriously though, I'm a bit confused on how to apply it.

Excuse the inline CSS, just for testing purposes, you understand.

Code: Select all

	<table class="general_style" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<th>Widget Name</th>
			<th>Option&nbsp;1</th>
			<th>Option&nbsp;2</th>
			<th>Option&nbsp;3</th>
		</tr>
		<tr>
			<td style="overflow: hidden;"><div style="float:left;">Item 1</div><div style="float:left;">Description goes here and goes on and on and on and on and on and on and on</div></td>
			<td>$75.00</td>
			<td>$90.00</td>
			<td>$110.00</td>
		</tr>
		<tr class="alt">
			<td style="overflow: hidden;"><div style="float:left;">Item&nbsp;2&nbsp;long&nbsp;name</div><div style="float:left;">Description goes here and goes on and on and on and on and on and on and on</div></td>
			<td>$75.00</td>
			<td>$90.00</td>
			<td>$110.00</td>
		</tr>
		<tr>
			<td style="overflow: hidden;"><div style="float:left;">Item 1</div><div style="float:left;">Description goes here and goes on and on and on and on and on and on and on</div></td>
			<td>$75.00</td>
			<td>$90.00</td>
			<td>$110.00</td>
		</tr>
	</table>

I didnt think this worked at first, but it actually does in IE, but firefox puts the divs on separate lines.

I'm also keen on finding a way to stop the title from wrapping. Maybe replace spaces with non breaking spaces will have to do though. The inlay table had NOWRAP going for it.

Did I apply it the way you intended, and any ideas on a fix for firefox?

Cheers

Posted: Mon Jul 09, 2007 8:42 am
by superdezign
Stryks wrote:No, I said *before* you say that.
I'm a rebel... What can I say? :P


I said overflow:hidden on the title element, not the table cell.

Posted: Mon Jul 09, 2007 8:49 am
by Stryks
Ummm ....

Code: Select all

	<table class="general_style" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<th>Widget Name</th>
			<th>Option&nbsp;1</th>
			<th>Option&nbsp;2</th>
			<th>Option&nbsp;3</th>
		</tr>
		<tr>
			<td><div style="overflow: hidden; float:left;">Item 1</div><div style="float:left;">Description goes here and goes on and on and on and on and on and on and on</div></td>
			<td>$75.00</td>
			<td>$90.00</td>
			<td>$110.00</td>
		</tr>
		<tr class="alt">
			<td><div style="overflow: hidden; float:left;">Item&nbsp;2&nbsp;long&nbsp;name</div><div style="float:left;">Description goes here and goes on and on and on and on and on and on and on</div></td>
			<td>$75.00</td>
			<td>$90.00</td>
			<td>$110.00</td>
		</tr>
		<tr>
			<td><div style="overflow: hidden; float:left;">Item 1</div><div style="float:left;">Description goes here and goes on and on and on and on and on and on and on</div></td>
			<td>$75.00</td>
			<td>$90.00</td>
			<td>$110.00</td>
		</tr>
	</table>
Still not working in Firefox ... What else am I missing here? It's the simple CSS that always gets me.

Posted: Mon Jul 09, 2007 8:56 am
by superdezign
Try floating only the first element and leaving the second static. If you make sure that the first element takes up the whole cell's height (maybe height 100%, but you may need to give it a set height), then it should look fine.

Posted: Mon Jul 09, 2007 9:08 am
by Stryks
Damn ... seems it has to be a set height. That complicates things as well.

Thanks for your help, I'll have to follow this up in the next day or so and get it sorted. Any further ideas welcome.

But, for now, it's time to crash.

Thanks again.

Posted: Tue Jul 10, 2007 1:19 am
by Stryks
Bah ... I cant find a way to do it without setting a height, which is pretty impractical when the content is dynamic, and might range from one line through to 10 or 15. Even if I set it at 15 lines, there will allways wind up being someone with a 16th line, while the rest will mainly have just one line of text and a huge gap.

Short of some other suggestion, it looks like I'm nesting tables again. :cry:

Posted: Tue Jul 10, 2007 1:30 am
by matthijs
Did you even try my suggestion?

Code: Select all

		<tr>
			<td><dl><dt>Item 6</dt><dd>Description goes here and goes on and on and on and on and on and on and on</dd></dl></td>
			<td>$75.00</td>
			<td>$90.00</td>
			<td>$110.00</td>
		</tr>

Code: Select all

	dl {}
	dl dt { float:left;display:block;width:30%; }
	dl dd { float:right;display:block;width:65%;}
Works exactly like you want (if I'm not misunderstanding).

Posted: Tue Jul 10, 2007 2:10 am
by Stryks
matthijs ... Sorry about that. I kinda skipped over it and forgot to come back to it.

I just set it up and gave it a run, and it's not really what I was trying to get. It looks just like the table did (with all descriptions starting at the same distance from the left border) and now long titles wrap as well.

What I was hoping for was a non-wrapping heading of flexible width with a description block beside it filling the remainder of the cell and wrapping flush with the start of the first line of description text.

Looking at the title and description should be like looking at a single cell with the first word or two boldened, where the non-bold text wraps to the start of the non-bold text, instead of under the bold.

I'm not really flash at describing this, am I? :?

Posted: Tue Jul 10, 2007 7:22 am
by superdezign
In order for height:100% to work, it has to have a height to work against. Try playing around with giving the table cells / rows heights and see what you come up with.

Posted: Tue Jul 10, 2007 8:23 am
by Stryks
I can apply height to the cell itself, or a bounding div, and the 100% adjusts as expected. My goal however was to make it truly dynamic, so that if it came to showing one line, it showed one line, and if it came to 10 or 15 for the next result, then it would expand.

In either case, setting the height is either going to leave a big gap on short description items, fit perfectly, or provide a wrap as expected for the first half of the description and then stepped back out for the rest. I've tried a bunch of different approaches, but it always seems to land in the same place. I cant make CSS do this without specifying a height or width, and doing so is just what I was hoping to avoid.

That nested table is starting to look easier and more acceptable by the second. :(

Unless I can find a way, it might have to be just that.

But seriously ... thanks for the responses guys. Awesome stuff, regardless of my inability to wring a solution from it. :bow: