Hulver's site || No Soliciting

Diaries
Everything
Who's Online?
FAQ / Help

Attention HTML infidels.

By i (Tue Dec 20, 2005 at 04:24:55 AM EST) (all tags)

How can I make a bunch of floating divs, all of the same size, without hardcoding the size? No *script.

The problem: I need to make a navigation bar for some crap or another, doesn't matter. I want the buttons to be arranged in a "table" so that they align nicely:
aaa bbb ccc ddd eee fff ggg hhh iii jjj
But the number of columns must adapt itself to the browser width:
aaa bbb ccc ddd eee fff ggg hhh iii jjj
All buttons should be of the same width, but I don't want to hardcode it and the content is different. So it should be determined as maximum content width.

Any ideas?

< #56 | BBC White season: 'Rivers of Blood' >

Login

Related Links

- i's Diary

Google

Comment Controls

Attention HTML infidels. | 14 comments (14 topical, 0 hidden) | Trackback

Nope by hulver (2.00 / 0) #1 Tue Dec 20, 2005 at 07:29:12 AM EST

Sorry. I don't know if it's possible without scripting.

CSS2 has a "min-width" property which you could use to give all the boxes the same width unless one has a larger content, but you'd still have to hard-code it.

The only way you could do it I think is with JS.
--
smart, pretty, sane. pick two - georgeha

Methinks by i (2.00 / 0) #7 Tue Dec 20, 2005 at 12:53:48 PM EST

ambrosen has the right solution. It's quadratic over space, but it should work.

[ Parent ]

If you do it, by ambrosen (2.00 / 0) #10 Wed Dec 21, 2005 at 05:56:03 AM EST

could you paste the code here?

I was assuming quadritic over space wouldn't matter with the 10 item example given, but of course it could be an issue. I wonder if there's a way to do that in one field, then copy the size across.

[ Parent ]

There will be more items. by i (2.00 / 0) #11 Wed Dec 21, 2005 at 10:11:37 AM EST

It was just an example.

[ Parent ]

: Still, by ambrosen (2.00 / 0) #12 Wed Dec 21, 2005 at 11:03:43 AM EST

it was an ego-boosting bit of HTML-fu for me. I can't think of any way to extend it further.

[ Parent ]

Sounds similar to... by andymurd (2.00 / 0) #2 Tue Dec 20, 2005 at 08:40:37 AM EST

a CSS photo album layout. I'm no expert in such things but I do remember some tutorials on the web when the big push to XHTML & CSS was happening last year.

I'm pretty sure it can be done without resorting to DHTML but you probably have better google-fu than me since I just got back from the pub.

To get the maximum size. by ambrosen (2.00 / 0) #3 Tue Dec 20, 2005 at 08:49:16 AM EST

Maybe if you create a div for each button, and fill each div with all the buttons, aligned to the top left of the div, but with visibility:hidden (not the same as display:none) set for all but the one you wish to show. That sounds like it'd work in theory, but who knows.

: Oh. by i (2.00 / 0) #6 Tue Dec 20, 2005 at 12:52:12 PM EST

I should try this. I have a vague idea about something like that in mind. Thank you.

[ Parent ]

You don't. by Canthros (2.00 / 0) #4 Tue Dec 20, 2005 at 09:13:47 AM EST

As Hulver suggested, you can try setting the min-width and max-width properties, but there's not much to be done if you want the sizes to be the same and not have them be hard-coded.

Perhaps something like:

.navbar div { float: left; width: 10%; max-width: 8em; min-width: 3em; }

You will, however, have an inconsistent height as the internal content wraps in each of the boxes, so borders are going to be iffy.

--
I'm ~~not~~ here, man.

Out of interest, by ambrosen (4.00 / 1) #5 Tue Dec 20, 2005 at 11:14:56 AM EST

do you think my solution would work?

[ Parent ]

I'm not sure I understood your solution by Canthros (2.00 / 0) #8 Tue Dec 20, 2005 at 09:59:02 PM EST

At least, I can't parse a working solution out of your description. If I do understand it, in addition to cluttering your source with a bunch of unnecessary markup, anything I've tried to get going on that idea seems either to clutter the layout with a bunch of unwanted (and empty) space where all those invisible buttons are, or to put all the buttons in one spot.

Could you show me what you mean?

--
I'm ~~not~~ here, man.

[ Parent ]

I'll try and get time to write it out. by ambrosen (4.00 / 1) #9 Wed Dec 21, 2005 at 05:47:27 AM EST

There is a huge amount of unnecessary markup and rendering involved, it's true. But probably for a 10-15 item menu it would be about the same as the amount for an ECMAScript solution.

I'd float the redundant hidden menu items in their container, so they'd all align to the side of it.

[ Parent ]

I look forward to it. by Canthros (2.00 / 0) #13 Wed Dec 21, 2005 at 11:57:32 AM EST

My curiosity is piqued.

--
I'm ~~not~~ here, man.

[ Parent ]

: So do I. by ambrosen (4.00 / 1) #14 Wed Dec 21, 2005 at 12:05:47 PM EST

Hopefully I'll get time to edit some HTML today.

[ Parent ]

Attention HTML infidels. | 14 comments (14 topical, 0 hidden) | Trackback