shapeshifter6161
New Member
This question is kind of hard to explain with words, so I will link to a jsFiddle. jsFiddle. If you look at any of the links, you will see some boxes that are at different levels. These are supposed to tile across the screen, kind of like what you can see here. How can I stop them from having the weird vertical spacing above the elements and get them to tile properly? I think that it is caused by each elements contents having different heights, but I don't know how to fix it. Here is the code that you can find in the jsFiddle:
HTML:\[code\]<div id="elements"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div></div>\[/code\]CSS:\[code\]#elements div { display:inline-block; width:250px; height:250px; border:solid thin #000;}\[/code\]
HTML:\[code\]<div id="elements"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div></div>\[/code\]CSS:\[code\]#elements div { display:inline-block; width:250px; height:250px; border:solid thin #000;}\[/code\]