Right div with variable width, left div takes remaining width

Question

I have a div (.container) of variable width containing 2 divs. The right div (.div-submit) is of variable width, depending on the language used. I want the left div (div-textarea) to adjust and take all the remaining space on the left. How can I achieve this without using flexboxes? See code below and this jsfiddle

<div class="container">
    <div class="div-textarea">
        <textarea id="txtarea" placeholder="This  is a textarea"></textarea>
    </div>
    <div class="div-submit">
        <input type="submit" value="Post">
    </div>
</div>

Please note that the right div does not have a fixed width, so solutions like this one does not work.

Thanks.

Use display:table for your container and display:table-cell for your inner divs — Pete, Jul 27 '13 at 16:34

score 1 · Accepted Answer · answered Jul 27 '13 at 16:47

1

I removed the float:left; from your textarea div and added overflow:hidden;. I have also repositioned the submit div in the HTML so that it is placed before the textarea div. It seems to work fine.

Please see my fiddle

answered Jul 27 '13 at 16:47

PTD

1,028
1
16
23

Rwd · Answer 2 · 2013-07-27T17:33:08.200

0

Try using display:table; eg:

.container{
background-color: green;
display:table;
}

.div-textarea{
display:table-cell;
background-color: blue;
opacity: 0.5;
width:100%;
}

.div-submit{
display:table-cell;
background-color: red;
opacity: 0.5;
}

Hope this helps!

*Edit*

Wrap the div-text area and the div-submit with another div and set it's display to display:table-row;

edited Jul 27 '13 at 17:33

answered Jul 27 '13 at 16:33

Rwd

34,180
6
64
78

1

This does unfortunately force the right-side div to be squeezed down to the smallest possible size to fit, in terms of wrapping. So just putting "hello world" in the right div will have "hello" and "world" wrapped on separate lines. So long as your individual content boxes inside the right div do have exact widths (you just don't know the sum of a variable number of elements), you're fine. Or rely on `white-space: nowrap` for text-based content. – Jul 27 '13 at 16:43

Aayushi Jain · Answer 3 · 2013-07-27T16:57:20.950

0

Try this one, if it can help you: JSFiddle

I have changed the widths in % instead of pixels and used text: no-wrap

edited Jul 27 '13 at 16:57

answered Jul 27 '13 at 16:47

Aayushi Jain

2,861
2
29
36

Right div with variable width, left div takes remaining width

3 Answers3