On Sat, Mar 23, 2013 at 2:37 PM, Philip TAYLOR <p.tay...@rhul.ac.uk> wrote: > > > Larry Martell wrote: > >> Thanks for the reply. This moves everything to the right. I want the >> buttons left justified, and the text right justified with the second >> button. Adding 'float: left' got it to do what I want: >> >> <div style='float: left; text-align: right;'> >> Want this right justified above Download button >> <br /> >> <input type="submit " class="submit " name="submit_preview " >> value="Generate Report "></input> >> <input type="submit " class="submit " name="submit_download " >> value="Download Table "></input> >> </div> > > But the buttons /aren't/ left-justified, Larry, nor > can they be, since the text is wider than the combined > width of the buttons. /Perhaps/ what you want is the > text left justified, and the right edge of the second > button vertically aligned with the right end of the text ? > >> However it had an odd, undesirable side effect. This was just a >> snippet of the page. This is contained within another div with a >> bottom border. Without the float: left the text and buttons display >> above the border as I want it to be and would expect it to be. But >> when I add the float: left the text displays on top of the border with >> the buttons below it. >> >> See: http://jsfiddle.net/w7BNW/4/ >> >> Remove the float: left to see what I mean. Why does the float: left >> cause this? How can I prevent that from happening? > > Use a mechanism other than floating the <DIV> to force > it to be no wider than the text : > > <div id='query'> > <div style='display: inline-block; text-align: right'>Want this > right justified above Download button > <br /> > <input type="submit " class="submit " name="submit_preview " > value="Generate Report " /> > <input type="submit " class="submit " name="submit_download " > value="Download Table " /> > </div> > </div>
The text I used was an example (albeit a bad one). The actual text is not wider then the buttons. In any case, using display: inline-block got me what I want. Thank you so much! ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
