Is there a way to do 2 divs has the same height?

Question

My CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width:100%;
}

.wrapper{
    width:80%;
    height:100%;
    min-height:auto
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    background:red;
}

.wrapped-nav{
    width:30%;
    float:left;
    background:green;
    height:auto;
    min-height:100%;
}

.wrapped-ent{
    width:70%;
    float:left;
    background:blue;
    height:auto;
    min-height:100%;
}

My HTML

<body>
    <div class="wrapper">
        <div class="wrapped-nav">Nav
        </div>
        <div class="wrapped-ent"></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Example</div>
    </div>
</body>

jsbin: http://jsbin.com/cefegifula/edit?html,css,output

When I enlarged the Ent div with those and this overcome the div Nav, a space is created as in the jsbin show, is there a way to do 2 divs has the same height?

unclear what you're asking. Both your DIV are 100% in height. — Roko C. Buljan, Nov 12 '15 at 22:57
This is probably one of the most asked questions regarding CSS design: "How to get two (or more) floated columns to have equal height?". Not surprisingly, there are a lot of different methods to accomplish this: https://css-tricks.com/fluid-width-equal-height-columns/ — HaukurHaf, Nov 12 '15 at 22:58
I don't think OP is asking that at all. Both his DIVs (blue/green) are 100%. I think that he wants the same *br-spaces-height-someting*. — Roko C. Buljan, Nov 12 '15 at 22:59
possible duplicate? http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height — Tomer Almog, Nov 12 '15 at 23:01
from IE 8 , display:table would be the easiest and solid way imho : http://jsbin.com/helituheki/1/edit?html,css,output , today, display:flex; works great too — G-Cyrillus, Nov 12 '15 at 23:36

score 0 · Answer 1 · answered Nov 12 '15 at 23:08

create a class that has height and refactor your code so that both divs have it.

so instead of using 100% for both divs use vh, px, or em to your advantage.

I would write it so that you have something like this.

<div class="class1 heightfix">

</div>
<div class="class2 heightfix">
</div>

and then in your css write

.heightfix{
  height: 70vh; // or px or whatever.
}

in other news never try to use <br/> in order to fix your spacing problems.

Is there a way to do 2 divs has the same height?

1 Answers1