How to make div or span elements really nest

Question

I have repeatedly encountered this problem and have not yet found a solution.

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

What does it look like:

What it should look like:

In this example, divs should behave like strings, but that's more than that: I want divs or span to be bounding fields for all of their contents. (Then it is also impossible for some of their contents to push parts of other divs.)

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

I want the inner (red) spacing so that the outer (blue) div is so high that it contains it. (again: bounding box).

copy code if jsFiddle is disabled: 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 in 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

Answer 2

Text i.e. "Configuration:" just floats inside your try div , putting text inside the container, then you don't need a float in your CSS to get what you want

(so you don't have floats to clean later and less css to support)

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

Answer 3

Try the following:

 input{ float:right; } div{ overflow:auto; } 

Fiddle: http://jsfiddle.net/0f5u0w6e/3/

Answer 4

Just add clear: right to the parent div of the input field. Something like that:

 <div style="clear:right;"> Config: <input type="text"/> </div> 

Avoid inline style and improve usage classes.

Answer 5

You can do this with a CSS trick.

 <div style="width: 220px;"> <div> Title Title Title <span class="button" style="float: right; padding: 10px;"> button</span> </div> <div class="clear"></div> <div class="aligment"> <span>Config:</span> <span class="input"><input type="text" /></span> </div> </div> .clear{ clear: both; } .aligment{ width:100%; } .aligment span{ float:left; width: 20%; } .aligment span.input{ float:left; width: 70%; margin: 0 0 0 10px; } 

Here is the fiddle