Question

I’ve added padding and margin to the li’s themselves, but it spaces them out too far. I’m trying to figure why the longer chapters won’t just push the bottom li down a line and keep on going.

Here is the test page.

This is my HTML:

    <div id="sidebar">
            <h2> <a href="#">Contents</a> </h2>
            <div id="accordion">
                <h3><a href="#">Part 1: Food  the Skin</a></h3>
                <div>
                    <ul id="partOne" class="toc">
                        <li><h3>01:</h3><a href="#">The Use of Fire</a></li>
                        <li><h3>02:</h3><a href="#">Downsides to Using Heat</a></li>
                        <li><h3>03:</h3><a href="#">Altered Protein</a></li>
                        <li><h3>04:</h3><a href="#">Protein Digestion</a></li>
                        <li><h3>05:</h3><a href="#">Protein in the Skin</a></li>
                        <li><h3>06:</h3><a href="#">Decomposition of Redundant Protein</a></li>
                        <li><h3>07:</h3><a href="#">Protein & Water</a></li>
                        <li><h3>08:</h3><a href="#">Swollen Skin,Cellulite & Treatments</a></li>
                        <li><h3>09:</h3><a href="#">Dry Skin</a></li>
                        <li><h3>10:</h3><a href="#">How to Rid </a></li>
                        <br/>
                        <li><h3>11:</h3><a href="#">Cellulite</a></li>
                        <li><h3>12:</h3><a href="#">Visibility of Fat Cells </a></li>
                        <li><h3>13:</h3><a href="#">Cellulite & Skin Tone</a></li>
                        <li><h3>14:</h3><a href="#">Cellulite & Treatments</a></li>
                        <br/>
                        <li><h3>15:</h3><a href="#">Acne: In Short</a></li>
                        <li><h3>16:</h3><a href="#">Acne & Hygiene</a></li>
                        <li><h3>17:</h3><a href="#">Acne & Hormones</a></li>
                        <li><h3>18:</h3><a href="#">Acne & Peeling </a></li>
                        <li><h3>19:</h3><a href="#">How to Eliminate Acne, Cellulite & Treatments</a></li>
                        <li><h3>20:</h3><a href="#">What Type of Acne</a></li>
                        <li><h3>21:</h3><a href="#">Susceptibility to Acne</a></li>
                        <li><h3>22:</h3><a href="#">Menstruation & Acne</a></li>
                        <li><h3>23:</h3><a href="#">Acne & Diet-results, Cellulite & Treatments</a></li>
                    </ul>
                </div>

                <h3><a href="#">Part 2: Nutrients & Toxins</a></h3>
                <div>Second content</div>
                <h3><a href="#">Part 3: The Diet</a></h3>
                <div>Second content</div>
                <h3><a href="#">Part 4: Losing Weight Naturally & Lastingly</a></h3>
                <div>Second content</div>
            </div>
</div>

Here is my CSS:

        #accordion{
        margin: 10px;
    }
        #accordion h3{
            font-size:16px;
        }
        #accordion h3 a{

        }
        #accordion h3 a:hover{

        }
        .toc{
            list-style:none;
            font-size: 14px;
        }
            .toc li{
                width: 220px;
                height:18px;
            }
            #accordion div > ul{
                padding: 10px 0 0 0;
            }
            #partOne h3{
                float:left;
                width: 25px;
                padding: 0 3px 0 0;
                font-weight:normal;
            }
            #partOne a{


                color: blue;
                text-decoration:none;
            }
            #partOne a:hover{
                text-decoration: underline;
            }

Can’t get this problem solved after a couple of hours!

Answer 1

Remove the height property from the .toc li style declaration:

.toc li {
    width: 220px;
}

• DEMO

If you’d like to set the line height of the lis, use line-height CSS property. Also, consider replacing & with &, reference HTML Entities.