[css-d] aligning text with right edge of button on the following line
I want to have a line of text and below it 2 buttons. I want the text to be right justified with the right edge of the second button, e.g. TEXT button1 button2 This fiddle is just one of my many unsuccessful attempts http://jsfiddle.net/w7BNW/1/ I'm sure this is simple, but I just can't figure it out. TIA! __ 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/
Re: [css-d] aligning text with right edge of button on the following line
On Sat, Mar 23, 2013 at 1:38 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Based on your code : div style='text-align: right;' Want this right justified above Download button br / input type=submit class=submit name=submit_preview value=Generate/input input type=submit class=submit name=submit_download value=Download/input /div 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 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? __ 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/
Re: [css-d] aligning text with right edge of button on the following line
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/
