How to make div or span elements really nest

Question

I have repeatedly run into this problem and did not find a solution yet.

Example 1: http://jsfiddle.net/0f5u0w6e/1/

What it Looks like:

What it should look like:

In this example the divs should behave like lines, but it is more than that: I want the divs or spans to be bounding boxes for all their Contents. (Then it is also impossible that part of their contents pushes parts of another divs content.)

Example 2: http://jsfiddle.net/gd7Losru/1/

I want the inner (red) span to make the outer (blue) div have a height such that it contains it. (again: bounding box).

copies of the code if jsFiddle goes offline: Example 1:

<div style="width: 200px;">
    <div>
        Title Title Title 
        <span class="button" 
            style="float: right; padding: 10px;">
            button</span>
    </div>
    <div>
        Config: 
        <input type="text" />
    </div>
</div>

Example 2:

<div style="background-color: blue;">
    <span style="padding: 10px; background-color:red; "></span>
</div>

Answer 1

Just clear the float on the second inner div:

<div style="width: 200px;">
    <div>
        Title Title Title 
        <span class="button" 
            style="float: right; padding: 10px;">
            button</span>
    </div>
    <div style="clear: both;">
        Config: 
        <input type="text" />
    </div>
</div>

JSFiddle