Question

I’m trying to create a div that would have a dynamic width depending on the content inside that div. It works well in Firefox but in IE I get linebreaks, see screenshot below:

The markup looks like this:

<div class="filter-dropdown">
    <div class="filter-dropdown-options-wrapper">
        <ul>
            <li>
                <label>
                    <input type="checkbox" checked="checked">(Select All)
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="2010-01-31" checked="checked">2010-01-31
                </label>
            </li>
        </ul>
    </div>
    <div class="filter-btn-wrapper">
        <input type="button" value="Ok" class="btn-filter-ok">
        <input type="button" value="Cancel" class="btn-filter-cancel">
    </div>
</div>

and CSS looks like this:

 .filter-wrapper div.filter-dropdown{
 position:absolute;
 top:-190px;
 right:10px;
 border:1px solid #CFD6DA;
 z-index:10000;
 display:none;
 padding:10px;
 height:170px;
 background-color:#EEF1F2;
}

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper{
 border:1px solid #CFD6DA;
 padding:5px 10px;
 height:130px;
 overflow-y:auto;
 background-color:#FFFFFF;
 width:100%;
}

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul{
 list-style:none;
 padding-left:0px;
 margin:0px;
}

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul li label{
 display:block;
}

.filter-wrapper div.filter-dropdown .filter-btn-wrapper{
 margin-top:10px;
 text-align:right;
 width:130px;
}

.filter-wrapper div.filter-dropdown .filter-btn-wrapper .btn-filter-ok{
 margin-right:5px;
 width:60px;
}

So, my question is – what do I have to do in order to avoid linebreaks and keep width of the outer div dynamic?

Answer 1

First, make your padding/margins on the right side of your inputs and that box small enough that it doesn’t WANT to wrap. It’s wrapping because it’s running out of room. If you set the background color of the labels you’ll probably see where it’s ending.

Lastly as a failsafe you can set white-space: nowrap; but this should be a failsafe for funky font size issues and such not your primary solution because it will introduce complications of horizontal scroll bars etc.

Edit: Also, you need to get your <input...> tags out of the <label...> tags. The labels should be attached to the inputs by name, not by virtue of being inside them!