I am having a heck of a time trying to center four input type buttons that are lined up horizontally next to each other inside a containing div and would appreciate any input on how to do this. So the problem is that I have four input type buttons that are horizontally in a line across the page. The 4 buttons combined in width do not equal the width of the containing div. I want the four buttons to be centered as a group inside their containing div. Setting margin: 0 auto in the containing div doesn't work because the containing div is as wide as the screen. Setting text-align: center doesn't work since the buttons are block level elements which are not affected by text-align (though the text on each button is of course). The button widths might change so I can't just add up the widths and set the container div to their combined width and then use margin: 0 auto (not to mention that the container div is as wide as the screen in the first place). Here is some code... <div style="border: 1px solid red;> <input class="button" type="submit" name="save_and_view"> <input class="button" type="button" name="upload_files"> <input class="button" type="button" name="create_navigation_links"> <input class="button" type="button" name="edit_navigation_links"> </div> Code (markup): The above outputs the four buttons to the left within the div. I want them centered within this div. The button class just sets the width of each buttons (15em) and the font and has nothing to do with the positioning. Anybody got any ideas? Thanks Carlos
just an idea, you make another div inside the current div. Then make the new div margin : 0 auto another idea; add text-align : center to the current div css good luck
If you don't have to worry about FF2 or lower, you can make them display: inline-block. Stays blocks so you can haz height and width on them, but will center with text-align: center on the parent div like inlines do.
After several more hours of CSSing (is that a word? LOL) I finally got the CSS down to what I needed. One thing I can't stand is all the CSS fluff and extraneous selectors in just about every single CSS that I have ever looked at on the internet. It makes things so much more complicated than they have to be with CSS (which I find to be a real pain as it is ). Anyway here is the solution that I came up with. It's based on http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support Genius of Matthew to come up with the solution that he did but for my purposes he still had way too much extraneous CSS. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- based on http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> body { margin: 0; padding: 0; } #menu { float:left; width:100%; background:#fff; outline: 1px dotted blue; height: 100px; } /* left: 50% makes the left edge of the block being centered 50% of the containing block width which in this case is 50% of menu width (which itself is 100% of it's own containing block). */ #menu div#button-wrapper { float:left; position:relative; left: 50%; outline: 1px dashed black; } #menu div#button-wrapper input { float:left; position:relative; right:50%; width: 15em; padding: 3px 0; background: #ddd; color: #000; font-size: .735em; } </style> </head> <body> <div id="menu"> <div id="button-wrapper"> <input type="submit" name="save_and_view" value="Save and View Changes"> <input type="button" name="upload_files" value="Upload Files" onclick="window.open('xxxxx', 'Upload Files', 'width=900,height=700')"> <input type="button" name="create_navigation_links" value="Create Navigation Links" onclick="window.open('xxxxx', 'Create Navigation Links', 'width=900,height=700')"> <input type="button" name="edit_navigation_links" value="Edit Navigation Links" onclick="window.open('xxxxx', 'Edit Navigation Links', 'width=900,height=700')"> </div> </div> </body> </html> Code (markup): Anyway for what it's worth I thought I would post what ended up working. I'll flag this solved now. Thanks for the input again! Carlos
I cleaned up a bunch of extraneous CSS from even my own version! Here's a the cleanest one yet... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- based on http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> body { margin: 0; padding: 0; } /* left: 50% makes the left edge of the block being centered 50% of the containing block width which in this case is 50% of menu width (which itself is 100% of it's own containing block). */ .menu { float:left; position:relative; left: 50%; } .menu input { position:relative; right:50%; width: 15em; padding: 3px 0; background: #ddd; color: #000; font-size: .735em; margin: 0; } </style> </head> <body> <div class="menu"> <input type="submit" name="save_and_view" value="Save and View Changes"> <input type="button" name="upload_files" value="Upload Files" onclick="window.open('xxxxx', 'Upload Files', 'width=900,height=700')"> <input type="button" name="create_navigation_links" value="Create Navigation Links" onclick="window.open('xxxxx', 'Create Navigation Links', 'width=900,height=700')"> <input type="button" name="edit_navigation_links" value="Edit Navigation Links" onclick="window.open('xxxxx', 'Edit Navigation Links', 'width=900,height=700')"> </div> </body> </html> Code (markup): Only thing I can't figure out is how to get rid of the extra space that appears between the buttons. I mean I know what is causing it. The browsers render the spacing between one "<input>" and the next "<input>" as a space to display but short of making all the "<input>"'s appear on one line in the code I think the only way to get rid of the excess space is to make them all float left. Oh well...at least it works. Carlos PS. I've got to keep these forums straight. There is no SOLVED button here. I was referring to something on another forum when I said I would flag this one solved LOL.
Bah, Paul O B came up with that. I agree it's extra markup, so I don't use this method. I use display: inline-block instead because I'm lazy, unless I need it to work in FF2 and below. Damned FF. <div class="menu"> <input type="submit" name="save_and_view" value="Save and View Changes"> <input type="button" name="upload_files" value="Upload Files" onclick="window.open('xxxxx', 'Upload Files', 'width=900,height=700')"> <input type="button" name="create_navigation_links" value="Create Navigation Links" onclick="window.open('xxxxx', 'Create Navigation Links', 'width=900,height=700')"> <input type="button" name="edit_navigation_links" value="Edit Navigation Links" onclick="window.open('xxxxx', 'Edit Navigation Links', 'width=900,height=700')"> </div> Code (markup): CSS and HTML make more sense when you follow logical rules (sounds hard with current browsers I know, but it's possible). What you are calling a menu, everyone else would call a form. That means form tags and all that. Of course, it also means surrendering your styling to the whims of the browser, esp that gawd-awful AquaMangaTeenSugarParty crap Safari pulls on you. The other option is to have a real menu, a list of links, with real anchors, and have (external!! like in the head man!!!) scripts interact with them, but the kinds of things these buttons are doing look like they need to be done with a form instead of javascripted buttons. Javabloat is a one-way ticket to slow, inaccessible sites. Unless this is for an internal application where you can guarantee that all users have the same browser, have Javascript enabled and aren't dependent on any assistive technology, this shouldn't ever see the light of day on teh interwebz (never mind we do all keep seeing it out there). It's because inputs are inlines (actually inline-block), and like all inlines, rendering engines expect them to be made up of text (even if they aren't, like images) and so do things like add little spaces underneath them for dangly letters, and more importantly, see the whitespace between the tags and treats them like whitespace between words: in other words, it does not remove that whitespace like it normally would between HTML tags. You get the same issue with display: inline-block on other elements. So you can either remove the whitespace in your HTML (a bad idea because it makes it even more unreadable) or float them as you've done (by making them blocks, you've removed the whitespace) or you could have given everyone a very small negative word-spacing in CSS (keeping them inline-blocks that they naturally are). You could go back to a div full of random button elements and make them display: inline-block but I admit browsers act dumber with button elements. The only good thing about them is they are more stylable than form inputs and are explicitly invented to do random script junk anywhere on the page. IE has issues with button elements and you end up needing to javascript them into working correctly for that silly browser. Ug.
Thanks again Stomme poes (interesting name) for giving me your input on this thread along with the other one you gave me input on. Much appreciated. Yeah...I know it looks weird having a submit button as part of a menu but in the actual code it's all enclosed in a proper form. I make a lot of my pages forms with many different buttons that do all kinds of things like Add, Edit, Next, Previous, Delete and so forth. By putting all these buttons in a form and making most of them buttons of type submit but with different names I know which button a user presses and can act accordingly in my PHP code. 3 of the buttons in the code snippet I posted don't do anything with the form but I put them there in line with the one true submit button so that from a user's standpoint they all look like part of the usual menu of buttons that they are used to seeing. I hope that makes sense. I know it's not the normal way of doing things but it's worked real well for me in trying to create internet applications that look and act more like normal Windows applications than we pages. I'm just trying to achieve a similar look and feel across any web applications I write so if I normally use buttons of type submit for users to click on...I use buttons throughout. In this case, for sure, I could have used links or other in place of the 3 buttons that are just buttons and not submit types but it would have broken my look and feel. I understand what you said about the space in between the buttons now that I heard you explain it on the other thread. Thanks again for your input! Carlos PS. I dread having to look at what I have created through IE later today. Hopefully it won't break my otherwise standardized way of doing things too badly .
Lawlz. So you've realised, HTML kinda sucks for applications. The way HTML is set up doesn't jive all that well with the kinds of things you need for applications. In general a lot of people either use anchors who use GET requests to the servers for things like special next, prev style buttons (supposedly you could do that with pure HTML using the rel attribute and <link> tags in your <head> but that doesn't work with like any browsers but maybe Opera...) or they use a lot of forms with POSTs for more safety. It's harder to keep semantics sane when trying to build a web application. Just keep your eyes open and on the one hand, see what others do, and on the other hand, keep in mind 99% of the web is poorly written and inaccessible : ) Stomme poes... is a dumb cat. Niet een slimme poes, maar een domme poes. Stomme poes. Chose that when I decided I was going to do this HTML and CSS stuff and felt like you.