Hi Everyone....

I have a div which contains an unordered list... After some user actions i load the div with a longer list i.e. containing more list items than the previous one. I use jquery's higher level ajax functions to do this.

The problem is when i load it through ajax the list elements overflow the div's bottom portion and some of them get's displayed out of the div.

I haven't set any heights for the containing div assuming that it will expand to accomodate any future longer lists.

I'll post the code below and will be extremely grateful if someone figures this out....

#sidebar1 {
    float: left;
    width: 15%; /* since this element is floated, a width must be given */
    background: #FFE8BF; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 0; /* top and bottom padding create visual space within this div  */
    text-align:center;
}

<div id="sidebar1">

                <div class="sidebarmenu">

                 <ul id="sidebarmenu1">
                        <li>
                            <a href="#" id="loadHotel" >
                                HOTEL
                            </a>
                        </li>
                        <li>
                            <a href="#" id="loadCountry">
                                COUNTRY
                            </a>
                        </li>

                        <li>
                            <a href="#" id="loadCity">
                                CITY
                            </a>
                        </li>


                    </ul>
                </div>

            </div>  <!-- end #sidebar1 -->

I load the list elements into the <ul id = "sidebarmenu1"> Hope i'm clear... Thanks a lot in advance....

3 answers

Dave 5
1
point

Are you floating any of the list items? You might try using the Clearfix method on the containing div to see if that sorts it out.

Answered almost 7 years ago by Dave
  • I agree. It sounds like a floating issue.. Jens Hedqvist almost 7 years ago
danwellman 5600
0
points

If a clearing solution doesn't work, you could try using jQuery's height() method, which returns the computed height of an element, then use the result to set the height of the container, ensuring it is long enough for the content.

You could use the success handler of whichever AJAX method you're using to do something like this:

$("#sidebarmenu").height($("#sidebarmenu1").height());
Answered almost 7 years ago by danwellman
0
points

Try floating the inner elements to the left, just like the containing div. Another method might be to use overflow: auto; although this occasionally has some issues.

Smashing Magazine had a very thorough article on this recently. Here's the link:

http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Answered almost 7 years ago by Nick Pettit