Divs in the same line not displayed in css

I have two divs (.diva and .divb) inside another div container (#divs-test).

<div id="divs-test">
    <div class="diva"></div>
    <div class="divb"></div>
</div>

I want to show both divs in the same line, so this is the css I use:

#divs-test{
    width: 100%;
}

#divs-test > div{
    height:40%;
}

.diva{
    width: 70%; 
}
.divb{
    width: 30%;
}

But the divs are not displayed.

What am I doing wrong?

This is the jfiddle.

http://jsfiddle.net/cspX5/

Answers


In order to make a percentage height like height:40% work, you must do one of these:

  • Set a height property to the parent, different than auto
  • Remove the element from the normal flow of the document (e.g. position: absolute), so that its height won't affect parent's one.

If not, the height of the children, which is set relatively to the parent's one, would depend on itself, since parent's height would depend on its content's height.


Divs are displayed, they just have zero height, if you will add

div { border:1px solid }

you will see them, check this: http://jsfiddle.net/cspX5/3/

In general: height in percents (of parent height) works only if parent of the element has defined non auto height.


Need Your Help

Python: Replace substring with a list

python replace substring

needs_eval = "((abc or def) and ghi)"

java.lang.IllegalArgumentException: y must be < bitmap.height() while trying to get the points of an ImageView which are black

android bitmap imageview

I am trying to find the points of the ImageView which are black. I am using a png image. Although the height of the ImageView is greater than the value of y that I'm passing. But still the exception