Cannot open select in 3 column fixed-fluid width layout

Question

I have created a three column fixed-fluid width layout that contains a select (fixed left), input (fluid center), and button (fixed right). Why is the select box in select-col not clickable/expandable/openable? I am observing this behavior in IE, Firefox, and Chrome.

How do I fix this and achieve the desired layout result?

Example: http://jsfiddle.net/cegyz1cd/2/

<div class="select-col">
    <select>
        <option value="0">Option 0</option>
        <option value="1">Option 1</option>
    </select>
</div>
<div class="input-btn-col">
    <div class="input-col">
        <input type="text" />
    </div>
    <div class="btn-col">
        <button type="button">Go</button>
    </div>
</div>

* {
    box-sizing: border-box;
}
select, input {
    width: 100%;
}
.select-col {
    float: left;
    width: 150px;
    margin-right: -150px;
}
.input-btn-col {
    width: 100%;
    padding-left: 150px;
    float: left;
}
.input-col {
    width: 100%;
    padding-right: 110px;
    float: left;
}
.btn-col {
    float: left;
    width: 110px;
    margin-bottom: 0;
    margin-left: -110px;
}

score 1 · Accepted Answer · edited Dec 08 '14 at 04:41

1

The second div input-btn-col is covering the div with the select element (select-col) because it has 100% width and is floating left and its nested div has a margin on the left.

It just need changes on CSS: http://jsfiddle.net/cegyz1cd/3/

* {
    box-sizing: border-box;
}
select, input {
    width: 100%;
}
.select-col {
    float: left;
    width: 150px;
    margin-right: -150px;
    position: relative;
    z-index: 999;
}
.input-btn-col {
    width: 100%;
    padding-left: 150px;
    float: left;
}
.input-col {
    width: 100%;
    padding-right: 110px;
    float: left;
}
.btn-col {
    float: left;
    width: 110px;
    margin-bottom: 0;
    margin-left: -110px;
}

edited Dec 08 '14 at 04:41

kspearrin

10,238
9
53
82

answered Dec 08 '14 at 03:41

Verhaeren

1,661
9
10

I figured it was something like this. Updated original question. Looking for a solution as well. Thank you. – kspearrin Dec 08 '14 at 03:43
@kspearrin I don't see anything new in your question. Check the solution. Previously, I only wrote the diagnosis. The answer is completed now. – Verhaeren Dec 08 '14 at 03:50
I only updated it to add that I was looking for a solution as well, not just a diagnosis. Any ideas for IE8+ support since `calc` is not supported in IE8? – kspearrin Dec 08 '14 at 03:55
You can try something like in this answer: http://stackoverflow.com/questions/16034397/css-calc-alternative although for me, it's better to use percentages in both `div's` let's say 15% for the left `div` 85% for the `right` div. – Verhaeren Dec 08 '14 at 04:04
I was able to clean up/trim down the HTML/CSS a bit using the border-box padding trick, however, I still end up with the same problem: http://jsfiddle.net/cegyz1cd/2/. Percentages are not an option since I need the fixed-fluid layout functionality. I also thought about table-cell display elements, however, that posses another problem for me since my real solution needs text-overflow capabilities on the center fluid column (http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell). – kspearrin Dec 08 '14 at 04:19
I add `position: relative` and `z-index: 999` to the `.select-col` and it works. I don't know if that would break something for you. You might try that to check if meets what you want: http://jsfiddle.net/cegyz1cd/3/ – Verhaeren Dec 08 '14 at 04:28
That works! Please update the answer with the alternate solution and I will accept it. – kspearrin Dec 08 '14 at 04:34
@kspearrin The solution is now there. I'm glad that done it for you! – Verhaeren Dec 08 '14 at 04:37

Cannot open select in 3 column fixed-fluid width layout

1 Answers1