unwanted row indent css - html

Question

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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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-->
Edit<br />
Delete
<br />
View
</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;
}

Answer 1

This is due to the way floating elements work. It orders the elements left-to-right based on exactly the order you have them in the HTML, but the element on the second to last row is actually longer than the other elements on the right, so when the next row occurs, it will place the following elements in the most reasonable (to the browser) location, which is directly to the right underneath the immediate row. This results in the very last item appearing as if it's a new row.
Visually speaking, this is occurring:
+-+-+-+
|A|B|C|
+-+-+-+
|D|E|F|
| +-+-+
+-+G|H|
|I+-+-+
+-+
Short of using min-height to have a guaranteed length in your typical browsing environment, or perhaps even tables (ew!), there's not a good way to solve for this in CSS.
There is, however, a javascript solution. It's a jQuery plugin called Masonry. I recommend it for this type of situation.
It's also worth noting that Masonry helps things stay consistent for column displays no matter how many columns are possible (mobile environments, wide screen monitors, etc.).

Answer 2

#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)

Answer 3

it is float issue.
the div that contains "DuSable Museum of African American History" has a bigger height than other divs. so it pushes the divs from next row.
2 things we can do
1) set a fixed height for each div
eg: add hegiht: 300px; or sth like that to div.entry
2) if fixed height is not possible, then add <div style="clear:both"></div> after every 3rd div in html markup.