How to align css class using bootstrap


Tags: css,twitter-bootstrap,margin

Problem :

im trying to align several divs with each other, for some reason its not working. Im using a simple bootstrap template...My code snippet is below and My JS fiddle is http://jsfiddle.net/sean3200/yU3TA/ Thanks!!

     I basically want my html to look like align such as:
     Album1: Name1
     Album2: Name2

    <div id="wellbox" class="well pull-right">
        <div><h3>Album Sales & Net worth</h3></div>
           <hr>
        <a href="#"><p id="album0">Album1:</p></a>
             <div><p id="albumdata0" class="album-class">Name1</p></div>

        <a  href="#"><p id="album1">Album2:</p></a>
             <div><p id="albumdata1" class="album-class"></p>Name2</div>

        <a  href="#"><p id="album2">Album3:</p></a>
             <div><p id="albumdata2"  class="album-class">Name3</p></div>

        <a  href="#"><p id="album3">Album3:</p></a>
             <div><p id="albumdata3" class="album-class"></p></div>
    </div>


Solution :

I would probably restructure as so:

<div id="wellbox" class="well pull-right">
    <div><h3>Album Sales & Net worth</h3></div>
       <hr>
    <div class'albumContainer'>
        <a href="#"><p id="album0">Album1:</p></a>
        <div><p id="albumdata0" class="album-class">Name1</p></div>
    </div>
</div>

and then I would add the following style:

.albumContainer{
    clear: both;
}
.albumContainer a, .albumContainer div{
    display: inline-block;
}

    CSS Howto..

    How to get glyphicons working in twitter-bootstrap?

    How did Blizzard achieve the layered cockpit view for the Starcraft II website?

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How to slide-out a submenu from under the navigation bar using CSS transition?

    How to make element stay in the same position using css?

    How to Obtain Contents of HTML Element in CSS

    How to change image size when nested in

    tag

    How to get a JavaFX XYchart to work with user defined CSS?

    How to target images with dynamically generated ids with CSS

    How to use :hover for one element and chnage another class css proprties

    How can I change the inline style text color of an element without the ability to add a class or id?

    How to change the background color of the heading from transparent to paint white?

    How to select an html element that has two class names?

    DOM How to add two divs (with jQuery inside them) next to each other?

    how to fix a display difference between chrome and firefox for css relative position?

    How to get a background image to work in CSS and HTML?

    How to check if all CSS files have been downloaded to insert HTML using JavaScript?

    less: how to import multiple css?

    How to maintain hover state even when mouseout of main drop down link

    Firefox File Upload Box is bigger than Chrome/IE/Safari - How to fix? - use size(HTML) and width(CSS) parameters

    How to position
    below rest of elements

    Show hint over a CSS background image on mouse over

    How to changes styles on first elements using CSS

    How can I hide page elements till an AJAX call completes?

    What's causing my hover image not to show it's transparency? [closed]

    How to write multiple css selectors in one line?

    How to make a colorful gradient glow around your input-box?

    How can I position a form with controls over a Google Map?

    How to solve this HTML/CSS bug? [closed]