Question

hi am new to the jQuery lib and so far very cool i have just hit a speed bump. i would like to display three elements. an < h4 > tag a < p > tag another < h4 > tag all within a < ul >. so when i open a heading it will display an list and each line will have a name an description and then the price. if i leave out the float it displays them under each other.

<div id="accordion">
<h3><a href="#">BBEEE Toolkit</a></h3>
<div >
  <ul>
    <li><h4>Very Large Generic</h4><p>Revenue greater than 1.5 billion</p><h4>Proposal on request</h4></li>
    <li><h4>Large Generic</h4><p>Revenue between 650 million and 1.5 billion</p><h4>67,980.00</h4></li>
    <li><h4>Medium Generic</h4><p>Revenue between 250 million and 650 million</p><h4>45,322.00</h4></li>
    <li><h4>Small-Medium Generic</h4><p>Revenue between 80 million and 250 million</p><h4>30,591.00</h4></li>
    <li><h4>Small Generic</h4><p>Revenue between 35 million and 80 million</p><h4>21,031.00</h4></li>
    <li><h4>QSE</h4><p>Revenue between 5 million and 35 million</p><h4>R14,340.00</h4></li>
    <li><h4>EME</h4><p>Revenue less than R5 million</p><h4>660.00</h4></li>
    <li><h4>Existing scorecard</h4><p>Upload an existing scorecard</p><h4>FREE</h4></li>
  </ul>
</div>

and my css looks like this:

#accordion {
border: 2px solid #eee;
border-radius: 0px 8px 8px 0px;
width: 940px;
height: 502px;
margin: /*top and bottom */5px /*right and left*/auto;
}

#accordion  h4 {
font-size: 16px;
}

#accordion  p {
font-size: 16px;

}

what could i do to align them to look like name description price, and not

name

description

price

next li??

Answer 1

h4 and p tags are block items so they will by default take up full width forcing the next item to go below. You can use display: inline to make them act differently.

h4, p {
    display: inline;
}

But more to the point you shouldn’t be using h4 tags since they signify headings. Something like this would work better. <li><span class="name">name</span> description <span class="price">price</span></li>