CODEWITHSUNDEEP
csshtml
James Carter
James Carter

Reputation: 849

CSS: Div width as wide as it's content

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>

Upvotes: 1

Views: 2187

Answers (3)

Eduard
Eduard

Reputation: 9165

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
`;

Upvotes: 0

Bilal Fazlani
Bilal Fazlani

Reputation: 6967

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>

Upvotes: 1

Ivozor
Ivozor

Reputation: 976

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"...

Upvotes: 1

Related Questions