showing multiple buttons inline in HTML

Question

i have the following code

                        <div class="form-horizontal" >
             <div class="form-actions" id="sub"  >
                <button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
                <button type="button" class="btn" onclick="cancel()" > Cancel </button>
             </div>
         </div>
         <div class="form-horizontal" >
            <div class="form-actions" id="sub1" style="display :none" >
                <button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
                <button type="button" class="btn" onclick="cancel()" > Cancel </button>
            </div>
         </div>

The problem is since i am using style="display :none" on the second Div class the schedule1 button and Cancel button are showing in different line. if we remove the style from the Div tag it will be inline. Any idea how to solve this?

am using the java script and based on certain conditions i will make the seconf DIV as visible

Answer 1

use

visibility:hidden

it will make then invisible but they will still keep their place in the document and you keep the formatting. display will make it vanish and no keep it place in the document flow, viability makes it invisible but still keeps its place in the flow.

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:

The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether).

1. Here is a jsFiddle example (Scroll over the text box) http://jsfiddle.net/joshnh/7JyRH/

2. good article on the topic: http://joshnh.com/2011/07/30/display-none-vs-visibility-hidden/

Answer 2

You can do this as well, using style="display:inline-block":

     <div class="form-horizontal" style="display:inline-block" >
         <div class="form-actions" id="sub" style="display:inline-block"  >
            <button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
            <button type="button" class="btn" onclick="cancel()" > Cancel </button>
         </div>
     </div>
     <div class="form-horizontal" style="display:inline-block" >
        <div class="form-actions" id="sub1" style="display:inline-block" >
            <button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
            <button type="button" class="btn" onclick="cancel()" > Cancel </button>
        </div>
     </div>

http://jsfiddle.net/6bFFf/1/