Need CSS help

Post #386,880 by drook 2/25/14 3:15:38 PM Reply	Need CSS help I'm working on a new design and I don't know if what I want is possible. http://no-secret-rec...category/recipes/ The 8th item down has a two-line title, where all the others are one line. That makes the item below it not float left the way I want. (Display has to be set wide enough for them to be three to a row to see this.) I could do this as a table and make each item the same height, but then if you have a narrower display (eg: mobile) it doesn't reflow to two columns, then one, like it does when using CSS. Option 1: Flow the tiles from top to bottom in each row, rather than left to right. Not sure how to manage this without setting explicit column counts and doing the math myself. Option 2: Dynamically reduce the font size to always be less than X no matter how many lines it takes up. 2a: Set an overflow property and just cut it off, let the tooltip display the full title. Option 3: Increase the height of the other elements (all? all on the same row?) to match the size of the largest. I used to work with some of those options in PDF, but haven't seen anything similar for CSS. Anyone seen an example? -- Drew
Post #386,887 by drook 2/25/14 4:40:24 PM Reply	Found a solution http://www.metaltoad...ext-fit-container I also discovered the vw measurement that's now available in CSS. Woot! -- Drew
Post #386,904 by Another Scott 2/25/14 8:31:12 PM Reply	Interesting. I would think it would be annoying to have to whip out javascript to do something that seems like it should be native to CSS. But it must be satisfying to make the page do what you want in spite of the language limitations! Cheers, Scott.
Post #386,940 by drook 2/26/14 10:52:33 AM Reply	My "solution" needs more work The script I found assumes there's only a single instance of the element you want to adjust. They should have used an ID instead of a class to make that clear. As written, it adjusts all the elements of that class (makes sense once I figured out why it wasn't working) based on whether the first element fits in its container. I'll have to build a walker to traverse all the elements and adjust each one individually. That can wait a bit. -- Drew
Post #386,947 by a6l6e6x 2/26/14 11:17:46 AM Reply	The plot thickens! :) Alex ÂThere is a cult of ignorance in the United States, and there has always been. The strain of anti-intellectualism has been a constant thread winding its way through our political and cultural life, nurtured by the false notion that democracy means that "my ignorance is just as good as your knowledge.Â -- Isaac Asimov
Post #386,969 by scoenye 2/26/14 6:51:55 PM Reply	Instead of floating Set category_header to display: inline-block. Also, set width: 162 instead of max-width. Otherwise, that same caption will cause that one element to grow to 162 resulting in a bulge on the right side.
Post #386,974 by drook 2/26/14 10:57:46 PM Reply	DUDE! YES! I owe you a beer. -- Drew
Post #386,996 by scoenye 2/27/14 5:56:12 PM Reply	Yay! In case you want to get rid of the vertical bump, you can try "display: table-cell" instead of inline-block, but you may have to embed the panels by threes in a div. Plus, the browser from Redmond may ignore you depending on the version.
Post #386,997 by drook 2/27/14 6:26:07 PM Reply	Not sure what bulge you mean? -- Drew
Post #387,002 by scoenye 2/27/14 7:11:24 PM Reply	Re: Not sure what bulge you mean? The box with the split line is taller than its neighbors.
Post #387,004 by drook 2/27/14 7:15:32 PM Reply	The height, yes ... but you mentioned width vs max-width? -- Drew
Post #387,008 by scoenye 2/27/14 8:33:46 PM Reply	Ah. No, different bulge. max-width allowed the text to widen the box and cause the row to poke out the right side. It stuck out like a sore thumb when scrolling down. The difference in height is less noticable and harder to address, so I didn't touch on it in the original response.
Post #387,014 by drook 2/27/14 10:16:45 PM Reply	I don't see that happening in Firefox What are you using, and which page are you seeing it? -- Drew
Post #387,024 by scoenye 2/27/14 11:20:55 PM Reply	Hmmm... Debian Wheezy's Iceweasel (aka FF 17) on a Toshiba Satellite A215. 1280x800 screen. I saved a local copy of the page you posted to test things. That may have had something to do with it, although the rest of that page section looked OK. I've shut it down for the night. I'll see if I can reproduce things tomorrow.
Post #387,037 by scoenye 2/28/14 6:34:59 PM Reply	't was an artefact. The saved page used a different font.
Post #387,041 by drook 2/28/14 7:35:22 PM Reply	Cool, thanks for the follow-up -- Drew

Welcome to IWETHEY!