Nested <DIV> does not align to top

Question

<div id="outer" style="position:relative; width:100%; height:100%">

  <div id="1" style="position:relative; width:25%; height:auto;"></div>

  <div id="2" style="position:relative; width:65%; height:auto;">

     <div id="2a" style="position:relative; width:15%; height:auto;"></div>

  </div>

</div>

The problem is that the #2 and #2a are not aligned to #1 and I have to use top:-xxpx to align to top.

http://jsfiddle.net/D7HZR/

Answer 1

#outer div {
    float: left;
}

You also need to set a height on the inner div if you want it to take up vertical space.

It's unclear if you want the 3rd div nested or not so I made a fiddle that has one version nested and one with them all side by side.

FIDDLE here

Answer 2

Frankly speaking I'm not sure what you want. I think you want that :

<div id="outer" style="position:relative; width:100%; height:400px; border:#000000 solid 1px;">

  <div id="1" style="float:left; width:25%; height:400px; background:#fff000;"></div>

  <div id="2" style="float:left; width:65%; height:400px;background:#ff0000;">2

     <div id="2a" style="float:left; width:15%; height:auto;background:#000fff;">2a</div>
      <div style="clear:both"></div>

  </div>

</div>

http://jsfiddle.net/D7HZR/2/

Answer 3

Fiddle. Is it what you are looking for?

#1, #2{
float:left;
}

Answer 4

Ok, i think that i've understand your problem, just add the display property on your divs of id 1 and 2

<div id="outer" style="width:100%; height:400px; border:#000000 solid 1px;">

  <div id="1" style="display: inline-block; width:25%; height:400px; background:#fff000;"></div>

  <div id="2" style="display: inline-block;  width:65%; height:400px;background:#ff0000;">

     <div id="2a" style="width:15%; background:#000fff;"></div>

  </div>

</div>

http://jsfiddle.net/p5KQJ/