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 prevent css auto hyphenation for email addresses

    How to implement a CDN failsafe for css files?

    Wordpress how to tell my css version

    How to Target Twitter Bootstrap <768px and 480px Breakpoints

    How do you determine whether a CSS property requires browser specific prefixes?

    How to apply CSS to part of some text without breaking the text content itself

    How do I make a div take the remaining height of a parent?

    How to make pure CSS dropdown menu appear with a fade in/slowly

    CSS how to target 2 attributes?

    my website not worked in Ipad and how I can fix some small issue? [closed]

    How to style a UL/LI drop down

    CSS how to make an element fade in and then fade out?

    CSS: How to specify table's height such that a vertical scroll bar appears?

    How to make multiple divs always fill out the whole browser size?

    Selenium IDE: How to check text color using CSS

    How to modify css in OpenERP 7?

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    Sum of two divs widths is greater than parent width. How to make the browser resize the last div instead of moving it to the next line?

    How to style unordered lists in CSS as comma separated text

    How to apply a CSS class to all instances of a control in ASP.NET

    How to set alternate row color for a given attached diagram

    show/hide multiple text field based on radio selection html javascript

    Color of links not always showing correctly

    CSS Less changes not showing. Compile or IIS error?

    Site Network Bar - Show Current Site Stats, CSS?

    How to align items of a list CSS/jquery

    Show Limited Data Using jquery

    How to apply CSS styles to links that appear in table headers?

    How to use the CSS pseudo element :before in multiple classes of same element

    How to add threshhold onclick() jQuery?