The Coin Return Foundational Fundraiser is here! Please donate!
Any CSS pros out there?
Rothgarr
Registered User regular
Registered User regular
Hey, guys. I have a CSS question and I figured there are a lot of smart people here...
My dilemma has to do with column and row heights -- specifically, getting things to line up when they wrap. For example, here's a simple example:
http://www.prwmusic.com/misc/columns-test-even.html
if you drag the browser window wider and narrower the elements will properly wrap to the next line. because everything is the same height.
But what to do you do in scenarios where the content differs in each bucket like this?
http://www.prwmusic.com/misc/columns-test-odd.html
If you drag the browser window wider and narrower you'll see what I mean.
Some additional points:
- I can not define a universal height, because sometimes the content might be really short in a row, or sometimes the content may be a lot.
- My layout isn't liquid, this is just for demonstrative purposes. But if I have a two rows of four columns I need to ensure that things will wrap correctly.
Any way in CSS to say "make the row as tall as the tallest item". Or would some voodoo javascript even be able to do something like this?
My dilemma has to do with column and row heights -- specifically, getting things to line up when they wrap. For example, here's a simple example:
http://www.prwmusic.com/misc/columns-test-even.html
if you drag the browser window wider and narrower the elements will properly wrap to the next line. because everything is the same height.
But what to do you do in scenarios where the content differs in each bucket like this?
http://www.prwmusic.com/misc/columns-test-odd.html
If you drag the browser window wider and narrower you'll see what I mean.
Some additional points:
- I can not define a universal height, because sometimes the content might be really short in a row, or sometimes the content may be a lot.
- My layout isn't liquid, this is just for demonstrative purposes. But if I have a two rows of four columns I need to ensure that things will wrap correctly.
Any way in CSS to say "make the row as tall as the tallest item". Or would some voodoo javascript even be able to do something like this?
Rothgarr on
0
Posts
You're asking CSS to solve a puzzle for you which is "fit these elements into a square as best as possible."
There might be something javascript-y.
What's the practical application of this if not demonstrative?
For now, I'm just doing proof of concepts before coming up with a new design that'll be hard to implement and upkeep. I can always ask one of the coders to come up with a script if I go in this direction. I was just curious if there was a way of doing this by telling something to be 100% height and it would inherit the height of the tallest item in a row or something.
No biggie. Just a thought.
Watch my music videos
No CSS element is aware of the dimensions or properties of other elements, only their parents.
My solution involved Javascript, and the secret sauce was using 1px blank images as shims to force the table renderer to make the column widths actual. Basically, the Javascript iterates over the columns (or rows, or both - same solution just more looping really), finds the largest column width, then rewrites the DOM to resize the columns. inserting a tiny image shim to force the page renderer to heel ensures it looks right.
It was a BITCH to code. Especially since at the time I wasn't all that great at Javascript. I think it took a month of refining to make it work, and the cross-browser solution was painful. There were all sorts of peculiarities and glitches before I got it working right. Tables are not intuitive or implemented consistently.
It wasn't fun, but I did end up with a pretty unique solution that I was happy with.
#container{overflow:auto;background:#cff;height:200px;}
#container div{float:left;height:inherit;width:100px;background:#ccc;margin:0 10px}
</style>
<div id="container">
<div>fedmsiougnfuisg nuifbg jfig fngs nfyurvb ufzob </div>
<div>fedmsiougnfuisg nuifbg jfig fngs nfyurvb ufzob fedmsiougnfuisg nuifbg jfig fngs nfyurvb ufzob </div>
<div>fedmsiougnfuisg nuifbg jfig fngs nfyurvb ufzob fedmsiougnfuisg nuifbg jfig fngs nfyurvb ufzob fedmsiougnfuisg nuifbg jfig fngs nfyurvb ufzob </div>
<div>fedmsiougnfuisg nuifbg jfig fngs nfyurvb ufzob </div>
</div>
otherwise, you are looking at massively stupid hacks.
in the case of tabular data, use a table! i'll forgive you!
For example, on screen that list might be three listings across. When printed, it might be four. When viewed on a mobile device, it might only be two across. So it needs to wrap dynamically.
It looks like I'll be able to do this dynamically with some javascript -- even without shims no less. (I can't do it but one of the coders on the team can do it). But I wanted to see if there was a way with CSS -- i thought maybe there was some min/max height that could be inherited somehow but it makes sense that it can not.
Thanks, guys!
Watch my music videos
Works great if you know what the maximum height/width is in advance. Getting this to work for static pages is trivial, true.
However, if the content is generated dymanically, you have to calculate it, which is what you use the Javascript for. That's when the more exotic, and painful work comes in.