Jon Crawford Jon Crawford - 5 months ago 31
HTML Question

Layout of inline-block and float: left elements

I have been looking for the answer to a specific problem. I have some repeated elements (using angularjs, but that has nothing to do with it). The third element, wrapped to a second row, is pushed down when the second is tall, leaving blank space between the first and third elements in the first column. I want to avoid this.

The structure is similar to this:

<div class="windows">
<div>short content</div>
<div>tall content<br />more content</div>
<div>any size</div>
</div>


and the css3:

windows { display: block }
windows > div {
display: inline-block;
float: left;
}


My issue is that my view allows for only two wide, so the third is being pushed down too far.

Observed Output:

#################################
#*************** ***************#
#*short content* *Tall content *#
#*************** *More content *#
# ***************#
#*************** #
#*Any Size * #
#*************** #
#################################


Required output:

#################################
#*************** ***************#
#*short content* *Tall content *#
#*************** *More content *#
#*************** ***************#
#*Any Size * #
#*************** #
#################################


Is there any easy solution that does NOT involve a 2-column div layout? Since these are dynamically loaded, 3 - 5 of them per tabbed category, I need them loaded simply in a single div. Due to angular, they are in one array. Two div columns would mean 2 arrays. I am looking for a simple CSS solution. I have tried 'vertical-align: top;' without success.

@farid: I cannot used fixed height...This is made scale to all device sizes. Word-wrap can make the height unpredictable and I do not want graphical glitches. The stated issue is much preferable to words dropping off the GUI element they are in. Unless you mean make them all taller...I do not want to waste screen space: on a large screen there would be too much padding.

Answer Source

* {
  /* include paddding and borders in width */
  box-sizing: border-box;
}

.windows {
    border: solid 5px red;
}

.windows > div {
    border: solid 5px green;
    float: left;
    width: 50%; /* use media queries at some size might set it to 33.333% */
}

.windows > div:nth-child(2) {
    border: solid 5px orange;
    float: right; /* this one needs to be float right */
}

.windows:after {
    content: '';
    display: block;
    clear: both; /* when using floats always clear them */
}
<div class="windows"> 
    <div>short content, <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> 
    <div>tall content<br />more content<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
    <div>any size<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
</div>