parent wrapper with absolute position, how to make width auto fit content inside,

Question

http://jsfiddle.net/rs659rLh/5/

How to keep the .label tag width auto fit the content inside (make span next to input) I think problem is the wrapper .dropdown-list set position absolute but I need that? I tried set the .dropdown-list position top bottom left right zero but still not work and these not work too...

according https://stackoverflow.com/a/7337237/1575921 seems the only way is set the position:absolute; wrapper specific width (auto or 100% both not work)

/* config */
ul {
  list-style: none;
}
ul, li {
    margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  word-wrap: break-word;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.clearfix >div, .clearfix >li, .clearfix >span, .clearfix >ul, .clearfix >input {
  float: left;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
input, span {
    display: block;
}
/* end: config */

.dropdown-list {
    background-color: yellow;
}

<ul class="clearfix">
    <li>
        <div class="clearfix">
            <ul>
                <li>top</li>
            </ul>
            <span>icon</span>
        </div>
        <div class="container relative">
            <ul class="dropdown-list absolute">
                <li>
                    <div class="label clearfix">
                        <input type="checkbox" value="{{name}}">
                        <span>{{name................}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>

Answer 1

I don't know if you see, but you have two labels and only one is with the class dropdown-list which has background-color property.

That's the problem. You must put a class with background on both classes if you wanna background for both.

Now, if you need one div with same size of other, you must set this width on css or use javascript to be dynamic.

---

If you wanna set background color on label tag directly, you must write directly on label, without span tag, otherwise, set on parent tag.

---

HTML:

<ul class="dropdown-list absolute">
                <li>
                    <label class="clearfix label-blue">
                        <input type="checkbox" value="{{name}}">
                        label text
                    </label>
                </li>
            </ul>

CSS:

/* config */
ul {
  list-style: none;
}
ul, li {
    margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  word-wrap: break-word;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}

input, span {
    display: block;
}
/* end: config */

.dropdown-list {
    background-color: yellow;
}

.label-blue {
    background-color: blue;
    padding: 10px;
}
}

Answer 2

remove position:absolute from your <ul>. You do not assign any coordinates or dimension here. So why the absolute positioning ?

Then get rid of

input, span {
    display: block;
}

If you want two elements to appear next to each other you cannot make them both block elements without floating them. Block elements always come with a "line break" at the end.

You can either:

• Leave it out, so input and span will be inline elements
• keep the block but float both elements to the left
• mark them as inline-block if that serves your purpose

ADD:

Have a look at https://jsfiddle.net/rs659rLh/7/ is that what you try to achieve?

The problem you have where is that you insist to use an absolutely positioned list element. The issue is that parent elements do not strech to accomodate all the content within its absolutely positioned children. If a child element is bigger than its parent the cnten just floats over or gets cut off. Therefor you have to define the dimensions of the parent element. which is quite inflexible. I did set:

.container{
    width: 200px;    
}

just to show how it works. All in all: your markup seem sto be way overcomplicated for the little you are trying to chieve here. Maybe you should rethink the whole process.