need some css help

[mit74]

Anyone know how to auto margin buttons so they're evenly spaced within a div and when the number of buttons is dynamic. I know the width of the outer div (banner) and buttons. I was thinking I can easily do it using php but is there a CSS method?

 

[Rudi]

Not that I can think of, unless you make the parent relative, float the inner elements and use percentage widths for everything within?

EDIT: Actually no, that wouldn't work either. You could use JS to calculate the percentage widths you need to use.. But that's going against your requirement for CSS!

 

[mit74]

I've done it with php for now. Problem is using CSS hacks you get it working on one browser, view it in another and it doesn't work
Well at least I know with php it'll work on all browsers!

 

[cmcp]

Can you be a little more clear about what you're trying to achieve? What does auto margin mean?

 

[mit74]

i have a outer div with specified width. I have buttons of say 100px width within that that need to be spaced evenly across the width regardless of how many buttons there are. If the user adds a button then the margin auto shrinks to fit the extra button in.

 

[WickITServices]

I confess to occasionally resorting to good old fashioned tables, which is no longer regarded as best practice as there still seem to be real problems in achieving cross browser compatibility. But using tables is really not a good solution, particularly if you want your site to look okay on smart phones and other small screens.

You could play about with putting each button in a div of it's own with margin:0 auto; and position:relative; but it is certainly an exercise for when you have plenty of time to fiddle about.

 

[KarlAustin]

Hi,

You could do it with jQuery - count the buttons, get the width of the div/parent element, calculate the spacing needed, then set it. Should work on any browser that has JavaScript enabled.

Cheers,

 

[mit74]

Hi,

You could do it with jQuery - count the buttons, get the width of the div/parent element, calculate the spacing needed, then set it. Should work on any browser that has JavaScript enabled.

Cheers,

i've done it with php now thanks. same principal of counting buttons and calculate space and inject variable into margin-right.

 

[Rudi]

i've done it with php now thanks. same principal of counting buttons and calculate space and inject variable into margin-right.

He's right though, to slightly change what I said you should use Javascript to do this. PHP doesn't really have any place deciding how your page should be laid out, I know you consider PHP to be a hack which it is, so is the JS really, but it's less of a hack

 

[KarlAustin]

Yup, I prefer to keep PHP as the Business Layer, let the layout be decided mainly by CSS, and some JS where needed to tweak the CSS correctly at run-time - makes maintenance in the future easier when you've not looked at the code for months.

 

[mit74]

He's right though, to slightly change what I said you should use Javascript to do this. PHP doesn't really have any place deciding how your page should be laid out, I know you consider PHP to be a hack which it is, so is the JS really, but it's less of a hack

well if JS is turned off then I would probably use php just in case anyway as it already uses php.

 

[Rudi]

well if JS is turned off then I would probably use php just in case anyway as it already uses php.

One way to think about it yes, but if a user has JS disabled they should expect something to be up, at worst it would surely just throw your box alignment off to the next line?

My main point is that PHP should be everything to make your application work, and not make it look pretty.

I guess it depends just how far you want to take good practice and maintanability, everyones views are different on this side of things (the others are wrong )

 

[The Web Guy]

It all depends on how your navbar and links are coded - using floats or inline!
If you has an URL, i could help!

 

[Rudi]

It all depends on how your navbar and links are coded - using floats or inline!
If you has an URL, i could help!

That wouldn't make a difference, because CSS doesn't know how many elements there are.

 

[ecenica]

Agree with rudi and Karl. A combination of CSS and JavaScript is best suited to tackle this kind of stuff.

It not only takes the processing load off the server, but keeps your code lean and sets up your code to be more suited to cross-browser, cross-platform solutions.

All the best,

Rich