CSS-Resize inline-block fill remaining space on line

Question

5.00/5 (1 vote)

See more:

Is it possible (using only css) to resize an inline-block container to fill all of the extra space on a line when the second inline block container changes size (based on innerHtml being removed or added)?

|---Div-------------------------------------------|
||-Box 1--------------------------||-Box 2-------||
|| width:fill                     || width:200px ||
||                                ||             ||
||--------------------------------||-------------||
|-------------------------------------------------|


|---Div-------------------------------------------|
||--Box 1-------------------------------------||-||
|| width:fill                                 || ||   Box 2 - width:10px
||                                            || ||
||--------------------------------------------||-||
|-------------------------------------------------|

Code:

HTML

...
<div>
    <span id="sp1" style="display:inline-block;width:?;">
      <textarea style="width:100%;" rows="6"></textarea>
    </span>
    <span id="sp2" style="display:inline-block;width:auto;">
      <textarea style="width:150px;" rows="6"></textarea>
    </span>
</div>

...

<script type="text/javascript">
    function x() {
       document.getElementById('sp2').innerHtml = '';
    }
</script>
...

So when the function 'x' is called, the span 'sp2' resizes to basically 0px and I want the span 'sp1' to resize to fit the width of the div. Later when another function is called the textarea will be put back in and I want the span 'sp1' to resize again and fill the rest of the line.
I don't want to use JavaScript to resize anything, I want to keep that in CSS.

And these containers don't need to stay the same display type either, they don't have to be inline-block.

-Kyle

Posted 21-Mar-14 1:51am

Kyle A.B.

Updated 18-Mar-16 10:53am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2014-03-21T03:55:00

You may be able to get that effect using a table as your two inline blocks. You may have noticed that if you create a table with unspecified sizes for the column widths that it auto-sizes to what it believes to be a best fit.

Your question is initially misleading: you only want to only use CSS, but you are using javaScript/DOM in your function.

Recreating regions via AJAX does this for me, certainly with tables. you fix the width of the tables and the columns fight it out.

pikiou · Answer 2 · 2016-03-18T10:53:00

I desperately needed a solution that works with variable widths and heights. This one does!
It is based on the answer to this question.

HTML

<div class="container">
  
    As much space as<br>you<br>want
  </br></br>
  
    Minimal width
  
</div>

CSS

.container {
  display: table;
}
.left {
  display: table-cell;
  width: 100%;
}
.right {
  display: table-cell;
}

.container * {
  border: 1px solid black; /* for the demo */
}

Fiddle demo

If you want "Minimal width" in the example to be on the same line, use

white-space: nowrap;

CSS-Resize inline-block fill remaining space on line

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0