Increase body width to fit content

I want a HTML page with a border around the content. The content does not fit on the screen.

Example:

<div style="border: solid red 1px;">
    <div style="width: 2000px;">
        Hello world
    </div>
</div>

I would like the bordered DIV to be 2000 pixels wide. However, it is only as wide as the browser viewport.

How can I make the outer DIV as wid开发者_运维知识库e as its contents, preferably without Javascript?

You can make the outer <div> shrink to fit its contents ("shrinkwrap") by adding float: left.

Just float it.

 <div style="border: solid red 1px; float: left;">
        <div style="width: 2000px;">
            Hello world
        </div>
    </div>