I'm having trouble aligning a paragraph element with a group of button elements. I'm using jQuery and CSS to try and do this.

Here is what I see:

And ideally I would like them all to be on the same horizontal line at the top of the screen, to avoid wasting pixel real-estate as I am. So have the DesignName text then immediately to the right of it in a line have the buttons.

Here is how the elements are being added in code:

var theDiv = $("#theDiv");

theDiv.append('<div id="buttonMenuDiv"></div>');

var buttonDiv = $("#buttonMenuDiv");
buttonDiv.append('<p id="DesignName" class="DesignName">DesignName</p>');
buttonDiv.append('<input type="button" id="MainMenu" value="Main Menu" >');
buttonDiv.append('<input type="button" id="NewModule" value="New Module" >');
buttonDiv.append('<input type="button" id="SearchDesigns" value="Search Designs" >');
buttonDiv.append('<input type="button" id="DesignDescription" value="Design Description" >');
buttonDiv.append('<input type="button" id="SaveWork" value="Save Work" >');
buttonDiv.append('<input type="button" id="PackageDesign" value="Package Design" >');
buttonDiv.append('<input type="button" id="Tutorial" value="Tutorial" >');

The "DesignName" class just specifies font attributes (size, color) so I didn't include it. Thanks for any help.

(Having some EDITING trouble with the single quotes in the append() calls)

I'm having trouble aligning a paragraph element with a group of button elements. I'm using jQuery and CSS to try and do this.

Here is what I see:

And ideally I would like them all to be on the same horizontal line at the top of the screen, to avoid wasting pixel real-estate as I am. So have the DesignName text then immediately to the right of it in a line have the buttons.

Here is how the elements are being added in code:

var theDiv = $("#theDiv");

theDiv.append('<div id="buttonMenuDiv"></div>');

var buttonDiv = $("#buttonMenuDiv");
buttonDiv.append('<p id="DesignName" class="DesignName">DesignName</p>');
buttonDiv.append('<input type="button" id="MainMenu" value="Main Menu" >');
buttonDiv.append('<input type="button" id="NewModule" value="New Module" >');
buttonDiv.append('<input type="button" id="SearchDesigns" value="Search Designs" >');
buttonDiv.append('<input type="button" id="DesignDescription" value="Design Description" >');
buttonDiv.append('<input type="button" id="SaveWork" value="Save Work" >');
buttonDiv.append('<input type="button" id="PackageDesign" value="Package Design" >');
buttonDiv.append('<input type="button" id="Tutorial" value="Tutorial" >');

The "DesignName" class just specifies font attributes (size, color) so I didn't include it. Thanks for any help.

(Having some EDITING trouble with the single quotes in the append() calls)

• javascript
• jquery
• html
• css

• 4 You're using jquery to append the elements...why? – aquinas Commented Sep 10, 2012 at 2:59
• 2 Use float and make to specify the width.... – lakshmen Commented Sep 10, 2012 at 3:00
• 1 Something like this? jsfiddle/v5eYt/1 – Ram Commented Sep 10, 2012 at 3:01
• 1 I probably would just use HTML markup for the buttons, then style and align with CSS. I don't see why this is done in jquery – avexdesigns Commented Sep 10, 2012 at 3:02
• 1 @aquinas I don't see the difference. Either way I'm dealing with DOM objects right? But I'm not attached to this particular way, whatever works at the end of the day. – JDS Commented Sep 10, 2012 at 3:03

3 Answers 3

#theDiv * {
display:inline;
}

Just make the elements inline instead of block.

http://jsfiddle/v5eYt/3/

Paragraph's and div's are of block type, which means they are automatically followed by a line break. Input's are not, and if you want "Design Name" to not be followed by break, you should probably just put it in a span (span's are considered inline elements, which join the flow of text around them). Floating as mentioned in the above ments will also work, but it es with a bit more baggage - if you're just trying to keep a bunch of simple items on the same line, inline elements (or setting "display: inline" in the css).

You can use a css rule for those buttons to implement this:

/*css rule*/

#buttonMenuDiv > input{
   display: inline-block;
}

You can set display to inline or inline-block. But if you set them to inline, the 'width' and the 'height' attributes will not take effect any more.