Float left is not putting div on the left side of previous div (second one overlaps the first)

Question

I have problem with: float: left code. Last, the third box overlaps the second box. Which causes the text TEXT2 to overlap TEXT3. I want that the 3rd box is on the right of the 2nd box, right after it (please don't use float: right).

Fiddle link .

CSS & HTML code together: (I know that css should be in external file, but this is in design mode:)

   <div style="float: left;">
            <div style="position: relative;">
              <div style="z-index: 2; position: absolute; top:0; right 0;">
                <img src="images/featured-taxtips.png" width="200px" />
              </div>
              <div style="z-index: 4; position absolute; top:0; right 0;">
                <img src="images/featured-gradient.png" width="200px" />
              </div>
              <div style=
                "z-index: 6; position: absolute; top:0; right 0;">
                TEXT1</div>
            </div>
          </div>

          <div style="float: left;">
            <div style="position: relative;">
              <div style="z-index: 2; position: absolute; top:0; right 0;">
                <img src="images/featured-lifestyle.png" width="200px" />
                </div>
              <div style="z-index: 4; position: absolute; top:0; right 0;">
                <img src="images/featured-gradient.png" width="200px" />
                </div>
              <div style="z-index: 6; position: absolute; top:10px; left 10px;">TEXT2</div>
            </div>
         </div>

        <div style="float: left;">
          <div style="position: relative;">
            <div style="z-index: 2; position: absolute; top:0; right 0;">
              <img src="images/featured-video.png" width="200px" />
            </div>
            <div style="z-index: 4; position: absolute; top:0; right 0;">
              <img src="images/featured-gradient.png" width="200px" />
            </div>
            <div style="z-index: 6; position: absolute; top:10px; left 10px;">TEXT3</div>
          </div>
        </div>

Answer 1

Demo

Remove position absolute on second div's first div.

 <div style="float: left;">
    <div style="position: relative;">
      <div style="z-index: 2;">
        <img src="images/featured-lifestyle.png" width="200px" />
        </div>
      <div style="z-index: 4; position: absolute; top:0; right 0;">
        <img src="images/featured-gradient.png" width="200px" />
        </div>
      <div style="z-index: 6; position: absolute; top:10px; left 10px;">TEXT2</div>
    </div>
 </div>

Reason1: You dont have height and width.

Reason2: Since you dont have height and width, absolute positioning inside relative div causes overlapping.

Answer 2

add 'width' and 'height' value for

<div style="float: left;">

elements. like

<div style="float: left; width: 200px; height: 200px;">