puzzling <div> problem

[Richard]

<div class="parent">
<div class="child1">
<div class="child1a">
xxx
</div>
</div>
<div class="child2">
<br>hello
</div>
</div>


The problem is in "child2".
In order for "hello" to show in the first line of the div tag, I need that
damn break in there.
Otherwise it doesn't show at all.
If I insert an image, the top line is cut off regardless of height.
I've tried various combinations in the definitions but can't figure this
thing out.

http://1-large-world.com/div1.html

 

[Richard]

Never mind. Worked it out.
Found out I forgot to include a } in the proper place.
Oh well.

 

[Els]

<div class="parent">
<div class="child1">
<div class="child1a">
xxx
</div>
</div>
<div class="child2">
<br>hello
</div>
</div>


The problem is in "child2".
In order for "hello" to show in the first line of the div tag, I need that
damn break in there.
Otherwise it doesn't show at all.
If I insert an image, the top line is cut off regardless of height.
I've tried various combinations in the definitions but can't figure this
thing out.

http://1-large-world.com/div1.html

Maybe you noticed, that the height of child2, is only 3
times as high as the height of child1, but you specified it
as 4 times as high. (child1: 25px, child2:100px) This is
because child1 is positioned in front of child2. This
explains the 'hello' being invisible; it is behind child1.
Just change the style for div.child1 {position:absolute;} to
{position:relative}, and it will appear as intended.