How can I style two spans within a div such that when span 1's width increases by x span 2's width decreases by x

Question

say you had this:

<div style="width: y px; display: inline-block">
    <span class="one"></span>
    <span class="two"></span>
</div>

Is it possible to style the two spans using css so that if span "1" has a width of x px then span 2 has a width of y - x?

Thanks!

I think you might have to use javascript or jquery to do that. — Basil Basaif, Dec 28 '13 at 21:52
You might be looking for something similar to this question: http://stackoverflow.com/questions/1961200/css-width-height-pixel-and-percentage-calculation-combintaion — BuddhistBeast, Dec 28 '13 at 21:52
Do you want these span to be on the same line or separate lines or does not matter? — BuddhistBeast, Dec 28 '13 at 21:57
Well, spans will only be as long as the text within the span. That is already a major problem with using spans. Maybe two divs would be a better suggestion, considering you can dictate the size of the divs but not of the spans? — BuddhistBeast, Dec 28 '13 at 22:00

score 2 · Answer 1 · answered Dec 28 '13 at 22:25

Here is the quickest fix I can possibly give you for what you are asking.

DEMO

The demo is going to show you a few things but first I want to break down my own code as we go over it. Let's start with the HTML Code:

<div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
</div>

In your example, you use a span. As far as I know, span will only allow you to muck with the width of the length of the text in your span. An example of that is here, where I have set the width of the span to be 100px but it will only show the width of text within the span.

This leads me to the reasoning of a div, it is simple, and you can use it to accomplish what you are asking for. So let's break down the CSS code:

.wrapper {
    width: 200px;
    background:gray;
    display: inline-block;
    height:20px;
}
.one {
    width:50px;
    background:red;
    height: 20px;
    float:left;
}
.two {
    width:-moz-calc(100% - .one);
    background:black;
    height:20px;
}

I apologize ahead of time for renaming your classes. Before we analyze this code, I would like to point out that I added in a height variable for each div so that I did not have to put anything in the div to check it. First thing is first, your instinct of using

display:inline-block;

is great! Next is to float or position these divs to be on the same line, in this case, you only need to float one of them to be sure they will both stay positioned on the same line. Next, I use a neat little trick, the -moz-calc, more information on this can be found on MDN's website. The gist of it is that it will take whatever the width of its parent element is and subtract the width of the class ".one" in this case, check the example below to see exactly where I am pin pointing.

.two {
    width:-moz-calc(100% - .one);
    background:black;
    height:20px;
}

Now, if you go through and play with my DEMO, you will quickly notice that if you alter the width of the red div, it will change the width of the black div, further accomplishing what you need :) If this is not what you want, comment below and we can figure something out :)

I encourage you to play around with my JsFiddle to get the exact feel for what the divs do and what the calculator does as well. Also, for future reference, this site has always been helpful for me!

calc is not yet so much usable, when display:table is in the spec since 1998 and works well since IE8 :) — G-Cyrillus, Dec 28 '13 at 22:36
Yet, this has basic support in IE 9 and we have already begun IE 10, making IE 8 not as current. moz calc works with the newer versions of most browsers, in fact, all of that information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/calc — BuddhistBeast, Dec 28 '13 at 22:41

score 0 · Answer 2 · answered Dec 28 '13 at 22:18

0

display:table/table-cell; seems to be appropriate to me.

<div style="width:200px; display: table">
<span class="a1" style="display: table-cell;border:solid;width:1px;">a</span>
<span class="a2" style="display: table-cell;border:solid;">b</span>
</div>

*Using numbers as first caracter to name class or id's is not a good idea. use W3C validator to find out *

Display will make your box react as a <table> and first <span> will shrink on its content will the other one will use all space left.

answered Dec 28 '13 at 22:18

G-Cyrillus

101,410
14
105
129

1

because table is not meant to be used for layout purpose like in late 90's – G-Cyrillus Dec 28 '13 at 22:35
Here is an insight: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html only use a table when you really need to. – BuddhistBeast Dec 28 '13 at 22:36
At this point you're just complaining about the tag names though. If you're styling it with table/table-cell, you *ARE* using a table, you're just calling it a div. It's still a table, being used for layout :P – Collin Grady Dec 28 '13 at 22:40
please, do not mix everything. – G-Cyrillus Dec 28 '13 at 22:45

How can I style two spans within a div such that when span 1's width increases by x span 2's width decreases by x

2 Answers2