Home/ Questions/Q 7599301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:37:43+00:00

I have an unwanted space in my lists. The code is below but I

  • 0

I have an unwanted space in my lists. The code is below but I have 3 column lists of about 8 rows, but the last rows first list item is causing an unwanted space. Almost looks like it just entirely moves over to the next column with nothing in its place. Not sure why. Other than that last row the lists are working fine. Any help?

html

<div id="museums" class="clearfix">

        <div class="entry">
            <p>The Art Institute of Chicago</p>
            <p>Art</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/2/edit">Edit</a><br />
                <a href="/museums/2" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/2">View</a>
            </div>
        </div>
        <div class="entry">
            <p>The Field Museum</p>
            <p>Natural History</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/3/edit">Edit</a><br />
                <a href="/museums/3" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/3">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Museum of Contemporary Art</p>
            <p>Art</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/4/edit">Edit</a><br />
                <a href="/museums/4" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/4">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Museum of Science and Industry</p>
            <p>Science and Technology</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/5/edit">Edit</a><br />
                <a href="/museums/5" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/5">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Adler Planetarium</p>
            <p>Universe</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/6/edit">Edit</a><br />
                <a href="/museums/6" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/6">View</a>
            </div>
        </div>
        <div class="entry">
            <p>The Chicago History Museum</p>
            <p>History</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/7/edit">Edit</a><br />
                <a href="/museums/7" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/7">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Museum of Broadcast Communications</p>
            <p>Radio and Television</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/8/edit">Edit</a><br />
                <a href="/museums/8" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/8">View</a>
            </div>
        </div>
        <div class="entry">
            <p>The Shedd Aquarium</p>
            <p>Marine Life</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/9/edit">Edit</a><br />
                <a href="/museums/9" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/9">View</a>
            </div>
        </div>
        <div class="entry">
            <p>The Notebaert Nature Museum</p>
            <p>Nature</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/10/edit">Edit</a><br />
                <a href="/museums/10" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/10">View</a>
            </div>
        </div>
        <div class="entry">
            <p>DuSable Museum of African American History</p>
            <p>African American History</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/11/edit">Edit</a><br />
                <a href="/museums/11" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/11">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Frank Lloyd Wright Home and Studio</p>
            <p>Architecture</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/12/edit">Edit</a><br />
                <a href="/museums/12" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/12">View</a>
            </div>
        </div>
        <div class="entry">
            <p>National Museum of Mexican Art</p>
            <p>Mexican Culture</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/13/edit">Edit</a><br />
                <a href="/museums/13" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/13">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Jane Addams Hull House Museum</p>
            <p>Social Welfare </p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/14/edit">Edit</a><br />
                <a href="/museums/14" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/14">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Abraham Lincoln Museum</p>
            <p>History</p>
            <p>Chicago , 
            Illinois</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/15/edit">Edit</a><br />
                <a href="/museums/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/15">View</a>
            </div>
        </div>
        <div class="entry">
            <p>Rebecca's Test Museum</p>
            <p>Test</p>
            <p>St. Paul, 
            Minnesota</p><br />

            <div class="edit">
             <!--JH - allow only logged in users to see edit and delete links-->
                <a href="/museums/16/edit">Edit</a><br />
                <a href="/museums/16" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>

          <br />
                <a href="/museums/16">View</a>
            </div>
        </div>
</div>

css

div.entry {
  position: relative;
  width: 30%;
  float: left;
  margin: 0 30px 10px 0;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}

div.entry p:first-child  {
    width: 290px;
    line-height: 1.2em;
    font-size: 25px;
    color: #E07951;
    margin-bottom: 3px;
    padding: 0px;
}

div.entry p:nth-child(2) {
    font-size: 17px;
}

div.entry p {
    font-size: 15px;
    line-height: 1.4em;
    margin: 0px;
    margin-bottom: 3px;
    padding: 0px;
}

.edit {
    padding-top: 10px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @d_r_w very well explained the problem with floats.

    You can try display: inline-block; vertical-align: top; on each of your blocks.
    Here is a fiddle

    Limitations:

    • contrary to tables or (better) display: table-cell;, your blocks won’t really be of same height. On white background, all is well and the problem with floats described by d_r_w is gone but if you add a background or a border around each box, you’ll see that they each have the height of their content. You still can add a background shorter than any content, on the first 3 lines for example.
    • mixing width in % and padding in px easily makes 3 div larger than 100% for many viewport widths. 🙁 You’d better use only % (partially done in the fiddle)
    • inline-block will output whitespace as a space, as for any whitespace between, say, two span. If you don’t want these ~4 px (3*33.33% + 3* 4px > 100% width and badaboom, see above), you’ve to add an HTML comment between each div </div><!-- nothing --><div> or output in your template NO whitespace, nil, nada (and add a comment for your colleagues on why it’s done like that).

    Other solution that will request extra div for each line/row: display: table; /* and table-row and table-cell */
    Compatibility: IE8+, and back to “inline-block” for IE6/7 (that is, display: inline; zoom: 1; equals inline-block on those old browsers)

    • 0