Note that there are some explanatory texts on larger screens.

plurals
  1. POEqual height border lines for divs that have float:left
    primarykey
    data
    text
    <p>I'm trying to achieve a same height border line between divs that are floated left using display:table-cells. I understand that if I change float:none, the heights of the divs are equal but for some reason I can't change float:left to none.</p> <p>Is there a way to make the divs equal height with float:left ?</p> <p>See this <a href="http://i.stack.imgur.com/3gMmk.png" rel="nofollow">image</a> to explain the problem and what I'm trying to achieve</p> <p>Code :</p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .c-grids {display:table} .c-grid {display:table-cell;float:left;border-left:1px solid red;padding:0 20px;} .c-grids input {display:block;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="c-grids"&gt; &lt;DIV class="c-grid c-grid-1of4"&gt; name&lt;INPUT type=text autocomplete="off" name="text1" value=""&gt; &lt;/DIV&gt; &lt;DIV class="c-grid c-grid-2of4"&gt; &lt;INPUT type=text autocomplete="off" name="text2" value=""&gt; &lt;/DIV&gt; &lt;DIV class="c-grid c-grid-3of4"&gt; &lt;INPUT type=text autocomplete="off" name="text31" value=""&gt; &lt;INPUT type=text autocomplete="off" name="text32" value=""&gt; &lt;/DIV&gt; &lt;DIV class="c-grid c-grid-4of4"&gt; &lt;INPUT type=text autocomplete="off" name="text41" value=""&gt; &lt;INPUT type=text autocomplete="off" name="text42" value=""&gt; &lt;INPUT type=text autocomplete="off" name="text43" value=""&gt; &lt;/DIV&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Thanks, CT</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload