CSS: Using 100% of remaining width

Question

I'm making a list consisting of an image, title, buttons, source code and am having a problem with using 100% of the remaining width.

My main problem is that I'm not being able to make a <textarea> use all the remaining width and height.

Here's what I'm getting: enter image description here

And what I intend to have: enter image description here

Below the source code, CSS:

.listing {width:100%;background:#f1f1f1;display:table;}
.leftimage {clear:none;display:table-cell;padding:20px;}
.listing .information {padding: 20px;width:100%;display:table-cell;}
.listing .information .title {font-size:20px;color:#016b98;}
.listing .information .title a {color:#016b98;text-decoration:underline;}
.listing .information .outsideButton {float:left;padding-top:5px;padding-right:5px;clear:none;}
.listing .information .outsideButton {clear:right;}
.listing .information .outsideButton .button {border: 1px solid #626262;background:#d8d8d8;}
.listing .information .outsideButton .button .label {padding:5px;}
.listing .information .outsideButton .button .label a {color:#626262;}

HTML:

<div class="listing">

                    <div class="leftimage">
                        <div style="height:150px;"><!-- Allows to change image position on click without changing .listing size -->
                            <a><img class="preview" height="150px" src="img.png"></a>
                        </div>
                    </div>

                    <div class="information">
                        <div class="title">
                            <a>TITLE</a>
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 2</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 3</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 4</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 5</a>
                                </div>
                            </div>                              
                        </div>
                        <!-- END OF BUTTONS -->

                        <!-- HERE I WANT TO DISPLAY THE TEXTAREA WITH HTML CODE -->
                        <div style="float:left;padding-top:10px;clear:left;width:100%;">
                            <textarea style="padding:0;margin:0;width:100%;"><?php echo htmlspecialchars("<div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?></textarea>
                        </div>
                        <!-- END OF TEXTAREA WITH HTML CODE -->

                    </div><!-- END OF .information -->
                </div>

Thanks.

SOLUTION: Set vertical-align:top; for every table-cell

Possible duplicate? http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set — conceptdeluxe, Jun 22 '13 at 23:07
Not really a duplicate since that post doesn't really solve this problem. I'm trying to get the `` to use all remaining width and height. — 2013Asker, Jun 23 '13 at 00:05
Yes, but as found out yourself the parent itself does not have a width of 100% - this is because it is floated, and that is what my "duplicate" refers to — conceptdeluxe, Jun 23 '13 at 00:08
All right. Removing the float generates a different problem. — 2013Asker, Jun 23 '13 at 00:17
You not necessarily need floats at all ... e.g. you could use `display: table-cell` for achieving the same ... maybe have a look at http://stackoverflow.com/questions/17256222/css-for-html-dynamic-layout-with-not-fixed-columns for using the display properties. — conceptdeluxe, Jun 23 '13 at 00:20
I tried almost all solutions I found here during the afternoon. Just updated the image and source code using table-cell. The div information is below the place it should be. — 2013Asker, Jun 23 '13 at 00:26

score 0 · Answer 1 · answered Jun 22 '13 at 23:20

0

First you have to tell the container div to get the remainder space and then tell textarea to get all that space of its parent. Add 'width: 100px' to each one.

<div style="float:left;padding-top:10px;clear:left; width:100%">
<textarea style="padding:0;margin:0; width: 100%"><?php echo htmlspecialchars("<div>    <span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?>
</textarea>
</div>

answered Jun 22 '13 at 23:20

Mario Lopez

1,405
13
24

I tried that and many other answers I found on StackOverflow, even using `display:table-cell`, but the solutions didn't work. This extends the width, but the div `.information` doesn't have the right size. If I set `.information` to 100% it appears below the image. Removing the `float:left` and adding 100%, the div appears on the right place, but the `` appears below and occupies the entire listing width. – 2013Asker Jun 23 '13 at 00:14

score 0 · Accepted Answer · edited May 23 '17 at 12:13

As also referred in my comments maybe this helps you to achieve the same result but without the usage of floats at all:

CSS for HTML dynamic layout with not fixed columns?

Build the layout with display: table; and display: table-cell; properties and then use width: 100% on your <textarea>

EDIT:

You still use floats for your buttons - clear them correctly - e.g. wrap them in a <div class="clearfix"> and use this css for it:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

EDIT:

For anyone refering to this question: as pointed out by 2013Asker, don't forget to set the vertical-align: when using display: table-cell

The problem was a lot simpler than I thought: **vertical-align**, it should be explicitly set to `vertical-align:top;` in order to the listing to be displayed correctly. — 2013Asker, Jun 23 '13 at 00:31

CSS: Using 100% of remaining width

2 Answers2