nassim nassim nassim nassim - 1 year ago 68
HTML Question

two div aren't on the same level using css

I should have 2 lists on same level , the data displayed in the 2 div are from database and are variables from 1 to 10 line max

My problem is the second div is deplaced down if the first div have more line
If they have the same number of lines it’s ok

This is what I have now

enter image description here

this is my code:

<div style="width: 55%; display: inline-block; background-color: #aaffaa">
<p style="
transform: rotate(-90deg);
width: 130px;
height: 50px;
float: left;
background: gray;
color: #fff;
text-align: center;
padding-left: 10px;
padding-top: 15px;
margin: 40px 0 0 -40px">List1: {{ form.varList}}
</p>

<p>
<span style="display: block;margin-left: 90px; "> {{ form.var1 }}</span>
<span style="display: block;margin-left: 90px;"> {{ form.var2 }}</span>
<span style="display: block;margin-left: 90px; "> {{ form.var3 }}</span>
<span style="display: block;margin-left: 90px; "> {{ form.var4 }}</span>
<span style="display: block;margin-left: 90px; "> {{ form.var5 }}</span>

</p>
</div>



<div style=" width: 40%; display: inline-block;background-color: #00CC33; ">
<p style="
transform: rotate(-90deg);
width: 130px;
height: 50px;
float: left;
background: gray;
color: #fff;
text-align: center;
padding-left: 10px;
padding-top: 15px;
margin: 40px 0 0 -40px">Projects:{{.form.varprojects }}
</p>

<p>
<span style="display: block;margin-left: 50px;"> {{ forme.var6 }} </span>
<span style="display: block;margin-left: 50px;"> {{ form.var7}}</span>
<span style="display: block;margin-left: 50px;"> {{ form.var8 }} </span>
<span style="display: block;margin-left: 50px;"> {{ form.var9}}</span>
<span style="display: block;margin-left: 50px;"> {{ form.var10 }} </span>

</p>
</div>

Answer Source

See https://jsfiddle.net/7abx2wLe/
Use vartical-align:top for every div in the row.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download