CSS: Div width as wide as it's content

Question

I have a problem with the width of a div, I want to have the width of the div equaled to the width of it's content.

The problem I have is, if I resize the browser down to a width of 1024 the content doesn't float anymore, which is correct but I'd need the div around it to be as wide as it's content.

Here is the code im using to test it:

Thanks in advance!!!

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Content with Menu</title>
    <style type="text/css">
        .box {
            border: 1px solid #AAA;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: top;
            zoom: 1;
            *display: inline;
        }

        div.box ol li label {
            font-size: 12px;
            position: relative;        
            float: left;
            width: 11em;
            margin-right: 1em;
            padding-top: 0.5em;
        }

        input {
            border:1px solid #CCC;
            font: 12px Arial,Helvetica,sans-serif;  
            width: 160px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box">
            <ol>
                <li>
                    <label>
                    TEST 1.1
                    </label>
                    <input type="text" disabled="disabled" />
                    <input type="text"/>
                    <span></span>
                    <span></span>
                </li>
                <li>
                    <label>
                        TEST 1.2
                    </label>
                    <input/>
                </li>
                <li>
                    <label>
                        TEST 1.3
                    </label>
                    <input/>
                </li>
            </ol>
        </div>

        <div class="box">
            <ol>
                <li>
                    <label>
                    TEST 2.1
                    </label>
                    <input type="text" disabled="disabled" />
                    <input type="text"/>
                    <span></span>
                    <span></span>
                </li>
                <li>
                    <label>
                        TEST 2.2
                    </label>
                    <input/>
                </li>
                <li>
                    <label>
                        TEST 2.3
                    </label>
                    <input/>
                </li>
            </ol>
        </div>
    </div>
</body>

Ivozor · Accepted Answer · 2013-02-04 15:01:17Z

1

To prevent such things as misplacement of content when window is resized to a low size, use min-width. This way, you can expand your content, but you set a minimum width, so that your content doesn't get "squeezed"...

answered Feb 4, 2013 at 15:01

Ivozor

9869 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Carter Over a year ago

Then the inner content would also be sized to this min-width, what wouldn't help me solve the problem..

Bilal Fazlani · Accepted Answer · 2013-02-04 15:41:29Z

agreeing with what @lvozor said,

your markup become's like this :

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Content with Menu</title>
    <style type="text/css">
        .box {
            border: 1px solid #AAA;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: top;
            zoom: 1;
            *display: inline;
        }

    div.box ol li label {
        font-size: 12px;
        position: relative;        
        float: left;
        width: 11em;
        margin-right: 1em;
        padding-top: 0.5em;
    }

    input {
        border:1px solid #CCC;
        font: 12px Arial,Helvetica,sans-serif;  
        width: 160px;
    }
</style>
</head>
<body>
<div class="box" style="min-width:1024px;">
    <div class="box">
        <ol>
            <li>
                <label>
                TEST 1.1
                </label>
                <input type="text" disabled="disabled" />
                <input type="text"/>
                <span></span>
                <span></span>
            </li>
            <li>
                <label>
                    TEST 1.2
                </label>
                <input/>
            </li>
            <li>
                <label>
                    TEST 1.3
                </label>
                <input/>
            </li>
        </ol>
    </div>

    <div class="box">
        <ol>
            <li>
                <label>
                TEST 2.1
                </label>
                <input type="text" disabled="disabled" />
                <input type="text"/>
                <span></span>
                <span></span>
            </li>
            <li>
                <label>
                    TEST 2.2
                </label>
                <input/>
            </li>
            <li>
                <label>
                    TEST 2.3
                </label>
                <input/>
            </li>
        </ol>
    </div>
</div>
</body>

Eduard · Accepted Answer · 2018-10-19 12:32:16Z

0

With React and styled-components.

Render:

<StyledInput
      value={value}
      length={String(value).split('').filter(v => typeof +v === 'number').length}
    />

Styling (with rem):

const StyledInput = styled.input`
   width: ${p => `${p.length * 0.9}rem`}; // adjust the number accordingly
`;

Styling (with px):

const StyledInput = styled.input`
   width: ${p => `${p.length * 16}px`}; // adjust the number accordingly
`;

answered Oct 19, 2018 at 12:32

Eduard

9,34511 gold badges49 silver badges73 bronze badges

Collectives™ on Stack Overflow

CSS: Div width as wide as it's content

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related