CSS how to align group of elements horizontally?


Tags: javascript,jquery,html,css

Problem :

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:

enter image description here

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)



Solution :

#theDiv * {
display:inline;
}

Just make the elements inline instead of block.

http://jsfiddle.net/v5eYt/3/


    CSS Howto..

    How to set the jquery draggable with margin left?

    How to style a parent element when the mouse is over a child element?

    How to override element.style height

    How do you find the dimensions of a “display: none” element?

    CSS: how to have child1 the same height as child2?

    How can I create a DIV that expands UP TO a height and then shows a scrollbar?

    How to include CSS for a specific part of the page

    How to reference CSS file in a javascript only class

    How to use CSS in Bootstrap to load a logo in the nav-brand class and have it centred?

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    Showing only one row of items with css independently of users resolution?

    How proper add 2 CSS file in a WordPress theme?

    How to move this button?

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    How to create a WordPress theme that use BootStrap?

    How to create zebra-stripe CSS with TAL?

    How do I chain an infinite css animation to a one-time css animation?

    How to style radio button or checkbox inside a bootstrap table?

    How to make changeable themes using css and javascript

    How to change custom icon image on hover of the link next to it?

    How can I align the left edge of HTML form elements using CSS?

    HTML/CSS Fluid Grid: How to overlay div to another div

    How to create this type of element using XHTML & CSS?

    How to apply CSS only to numbers in paragraph? (without )

    how to have a css in javascript when onsubmit trigger in another window?

    How can you resize li labels without resorting to coupling or absolute sizes?

    How to remove all input outline?

    How to get CSS styling to shown on page? [closed]

    How to take an element over to given padding with CSS

    How to make onmouseover on menu link change background image?