Edit Question - KnowledgeHub

Title Body

I have an unordered list styled to display horizontally. One of the li elements contains a div element. This div element is filled using ajax, though it shouldn't matter. The div element has a larger height than the rest of the li elements, and by default it aligns with the bottom of the parent container. Update: Well, isn't this awkward. I coded a simpler example in jsfiddle http://jsfiddle.net/Bfp3K/ , and it works properly. I have to check my code again to get the error in the sandbox. Update2: It wasn't that easy after all. I have added my proposed (and used) solution. Update3: Disregard the previous answer, it wasn't correct. This is a simplified and testable example of the problem: JSFiddle: http://jsfiddle.net/Bfp3K/10/ CSS: #one { background-color:red; } #two { background-color:green; } #three { background-color:yellow; } #four { background-color:blue; } .normal { height:100px; width:200px; display:inline-block; } .big { height:200px; width:300px; display:inline-block; } ul { display:block; } ul li{ display:inline; } HTML: <ul> <li><div id="one" class="normal">One</div></li> <li><div id="two" class="normal">Two</div></li> <li><div id="three" class="normal">Three</div></li> <li><div id="four" class="big"> The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs. </div></li> </ul> Images: What the solution should look like: What the problem looks like:

Tags (comma-separated) Cancel