css - How to grow a div horizontally by its content? -

Please, can anyone explain to me why the red div is not correct? It stops the screen to finish, what do I have to do to expand it?

One thing that works "Display: Table-Cell" is on the red div, but I was thinking that there is some other way and why does this happen ...?

  & lt ;? XML version = "1.0" encoding = "UTF-8"? & Gt; & Lt ;! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Stronger // N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> & Lt; Html xmlns = "http://www.w3.org/1999/xhtml" & gt; & Lt; Head / & gt; & Lt; Body & gt; & Lt; Div style = "background-color: # f00;" & Gt; & Lt; Div style = "width: 2000px; height: 100px;" /> & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

It's really bizarre to try external float:

< Pre> & lt; Div style = "background-color: # fag; float: left;" & Gt; & Lt; Div style = "width: 2000px; height: 100px;" / & Gt; & Lt; / Div & gt;