The below code looks like what I want in browsers I check with except IE when using compatibility mode. In compatibility mode the submit (Remove) button wraps to the next line. It should look like it does in Firefox or IE when not using compatibility mode - Remove button in the same line with text but lined up at right (so kind of like justified). Can't use float:left/right because I cannot specify length beforehand. Text left aligned, Remove buttons right aligned. <div> <ul style="display:inline-table"> <li style="text-align:left; white-space:nowrap"> <div> <div style="display:table-cell; width:100%"> <p style="margin:0; padding:0"><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</p> </div> <div style="display:table-cell"> <form style="margin:0; padding:0" name="rct" method="post" action="some_page.html"> <input name="Quantity" value="0" type="hidden" /> <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rbn" /> </form> </div> </div> </li> <li style="text-align:left; white-space:nowrap"> <div> <div style="display:table-cell; width:100%"> <p style="margin:0; padding:0"><b>Name: </b>Short Test Name <b>Qty: </b>1</p> </div> <div style="display:table-cell"> <form style="margin:0; padding:0" name="rct" method="post" action="some_page.html"> <input name="Quantity" value="0" type="hidden" /> <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rbn" /> </form> </div> </div> </li> </ul> </div>
See, this is what I'm referring to when I talk about tag abuse and "non-semantic markup in the name of semantics" - it's the type of bloated nonsense the anti-table zealots come up with that's not only more code than neccessary, it makes endless nested tags for no good reason. What you have here is an orderly arrangement of data into rows and columns. The rows are related by item, the columns are related (description and controls). That's tabular data.... and it would be a FRACTION the code you are using now as a proper table. Hell, I'd divide out quantity to it's own column to boot, and of course make those VALID forms - or use an anchor instead of a form input since there's not much reason to be using a form for that... or use a single form and pass a value on the submit... actually, that's probably the better approach. I'd seriously consider changing that to something like this: <form action="formHandler.php" id="products"> <table> <colgroup> <col align="left"> <col align="center"> <col align="center"> </colgroup> <thead> <tr> <th>Name</th> <th>Quantity</th> <th></th> </tr> </thead> <tbody> <tr> <th>Test name that is longer than the other</th> <td>1</td> <td><input type="submit" name="remove" value="1" /></td> </tr><tr> <th>Short test name</th> <td>1</td> <td><input type="submit" name="remove" value="2" /></td> </tr> </tbody> </table> </form> Code (markup): You've got data that's obviously tabular, so embrace it. That's HALF the bytecount of what you have with everything else belonging in your stylesheet. Though if you REALLY want to say name, qty, etc on each and every line... Lose the wrapping div, do NOT even try to use that display:table nonsense, put the input first and float it with a margin on the content area.... and lose the paragraph since you already said they are line-items. <form action="formHandler.php" method="post" id="products"> <ul> <li> <input type="submit" name="remove[1]" value="Remove" /> <div><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</div> </li><li> <input type="submit" name="remove[2]" value="Remove" /> <div><b>Name: </b>Short Test Name <b>Qty: </b>1</div> </li> </ul> </form> Code (markup): Though that takes a little CSS... #products ul { list-style:none; } #products li { overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats in IE */ } #products input { float:right; } #products div { margin-right:6em; /* you might have to play with this */ } Code (markup): That's one hell of a lot less code than you were trying to use. Really you are just over-thinking your layout. Over half your code is unnecessary. You don't need to keep slapping div's around EVERYTHING, or paragraph tags around anything that just so happens to be text. A product name is NOT a paragraph, an image is NOT a paragraph - so why do people keep slapping them in paragraph tags? Oh, BTW, never, EVER dick with the padding on a input - it is NOT applied equally across all browsers. FF has a random amount somewhere between 0.2 and 0.3em of which you have no control thanks to it's nyetscape heritage, IE has 4px that won't go away even when you set zero, Opera treats them as if they were display:inline-block (the most sensible approach IMHO) and don't even get me STARTED about what webkit does to them. View FF, Opera, IE and Chrome side-by-side, and you'll see what I mean - they're all different sizes. Likewise I wouldn't be screwing with margin on them either. Leave inputs at their default margins and padding, it's the only way to even come CLOSE to having them end up the same size in all browsers.
I understand your frustration and anger. I was trying to do this without using tables, rows, cells (you caught me), which was proving to be very frustrating. It's funny, it used to be easy (to me) to use tables, but I'm trying to get away from them because as I understand it they're going the way of the dodo bird. I prefer px to em (just me).
With a bit of finessing the tables, rows, and cells approach seems to do exactly what I want, so I'll be going with that. I normally put all my styling in a separate sheet, but this was a work in progress and I didn't want to waste my time separating everything till I knew I had the solution to the problem. The second solution didn't work as required. Thank you for your help and counseling. I'll try not to be so zealous in my anti-table ways in the future. =)
Tables aren't going anywhere - anyone telling you otherwise doesn't understand what they are for. Tables are for tabular data, and it's semantically correct to use them for such. It is NOT semantically correct or appropriate to use them for unrelated columns like a page layout. (Content and sidebar). It is not semantically correct to slap them around every element - see the people who waste time using them when they only have one TD per TR (or worse only one TR). It's like some people out there started going nutters with the anti-table rhetoric - MOST of it being FUD. They heard "tables for layout bad" and immediately went "DON'T EVER USE TABLES" - that's not what is meant by that. Tables are FINE for tabular data. You want to put a billsheet or spreadsheet on a page, are you REALLY going to waste your time using meaningless non-semantic containers and floats so your column headings are unrelated to their content? It's made worse by the people who used tables for years but never once used them RIGHT... Now they're not using tables and abusing other tags incorrectly instead, even on tabular data. Take a look at the TRAIN WRECK the default forum skin for Vbulletin 4 is for an example of this half-assed nonsensical bull. They are abusing an unordered list, and a bunch of DIV and span for elements that frankly, should be caption, TH, and TD - probably with TBODY and THEAD involved as well. But that's half the problem right there - the majority of developers who used tables and those continuing to use them seem to have never heard of any of these other tags or think they are unnecessary. I see one more: <tr> <td colspan="4" class="wideHeading">General Discussion</td> </tr><tr> <td class="heading"></td> <td class="heading"><b>Topic</b></td> <td class="heading"><b>Posts</b></td> <td class="heading"><b>Last Post</b></td> </tr> Code (markup): I'm going on a rampage with a shotgun; The first of those obviously being a CAPTION and all of those <td class="heading"> obviously being TH. 99% of the problems with people using tables can be broken into two groups - people using them for no good reason on things that aren't tabular data; and people using them incorrectly by thinking the only valid tags for tables are TR and TD - or not realizing that much of what they are using extra containers like div for inside their TD could just be applied using colgroups/col, sibling selectors, or to the TD/TH themselves directly.
@Deathshadow I'd first of all like to thank your rant about the use of tables etc without which I would not have learned - so I'll be studying everything you wrote again because everything I have learned has been from the web, instructions don't give the best reasoning. Secondly I wonder if anyone has a simple answer to my question: I have a few wordpress sites, I can go in and edit the PHP just to give them layout tweaks etc. Now on a couple of websites the search submit button recently did wrap to the next line - and this just gives me an annoying layout issue I don't know how to fix. It was fine just a couple weeks ago, and for no reason it's wrapping to the next line. I assume it's something to do now that you've mentioned it with new browser updates?