DIV consuming the remaining space

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I am trying to simulate a behavior I get with TABLEs using DIVs
instead.  For example, consider a fixed width table, where the left
column is variable size, and the right column fills the remaining
space.  Is it possible to do that with DIVs?  Here is my sample test


  This is what I am trying to simulate with DIVs instead of TABLEs:

  <table style="width:550px;" cellpadding="0" cellspacing="0">
    <td style="background-color:pink; white-space:nowrap;">This Text
Can Grow Or Shrink</td>
    <td style="width:100%; background-color:red;">Content</td>


  Here are all DIVs with floats left and right.  It doesn't respect
remaining size and forces a line break.

  <div style="width:550px; white-space:nowrap;">
   <div style="float:left; background-color:pink;">This Text Can Grow
Or Shrink</div>
   <div style="float:right; width:100%; background-


Re: DIV consuming the remaining space

In article
Quoted text here. Click to load it

Check up on the correct formulation for this dtd.

Quoted text here. Click to load it

100% of what? The table presumably, what else? OK, let's look at

If you put in no width property at all, this second cell would
still "fill... the remaining space". But by putting in 100% width
you force the cell to try with all its might to be the width of
the table. Of course it fails. But at least it gets greedy this
way: meaning it takes as much as it can that is left over by the
left cell being confined to just what it needs and no more.
Without the width on the second cell, the first cell is not
guaranteed to be shrink to fit to its content. It might happily
take up as much space as is needed to leave room for the second
cell's content to be represented.

Here we are getting into interesting and complicated table layout

Quoted text here. Click to load it
See the proper syntax for the 4.01 Strict doctype. It is <br> and
not <br/> (nor the more correctly wrong: <br />).

Quoted text here. Click to load it

Having said all, perhaps the following is *close enough* to what
you want:

<div style="width: 550px; white-space:nowrap;">
<div style="float: left; background-color: pink;">This Text Can
Grow Or Shrink</div>
<div style="background-color:red;">Content</div>

It is worth pointing out that you will not quite get the same
behaviour with divs because see what happens when the user
enlarges the text. The table will ignore the width of 550px in
favour of having all the text nicely at home in their cells. The
div way, the text breaks out...

What are you really doing?


Re: DIV consuming the remaining space

Quoted text here. Click to load it

Thanks, I will look into the DTD standard.

Huh, I thought I tried without a width specifier, and the second
column only filled the amount which was used by the content.  Why does
the second column fill the remaining space of the parent DIV?

What I am trying to do... I have a box (DIV) where the size can
change.  Though the size changes on the server so I know the size on
the client.  Anyway, basically I need the box to have two columns, the
left column is a label and the right column is an input text box.  The
input box needs to fill the parent DIV as much as possible without
obstructing the label.  And I cannot predetermine how much space the
label takes -- the font family, font size, etc can change.  That is
why I need the text box to just use the remaining space.

I tried your solution with a text box with width=3D100% and the text box
was sizing to the size of the parent div.  So I tried
position:relative and that didn't help...

<div style=3D"width: 550px; white-space:nowrap;">
 <div style=3D"float: left; background-color: pink;">This Text Can Grow
Or Shrink</div>
 <div style=3D"background-color:red; position:relative;"><input
type=3D"text" style=3D"width:100%"/></div>

For this problem, would it be better to just use a table?  I've always
tried to avoid tables where possible...


Re: DIV consuming the remaining space

In article
Quoted text here. Click to load it


OK, many boxes are like this.

Quoted text here. Click to load it

I have no idea what this means?

Quoted text here. Click to load it

The perfect tool for this is a table. Use a table and be done!

Or not and we will have fun instead trying to use a hammer, a
multigrip and a screwdriver instead of the right tool, namely an
impact screwdriver.

(It is a trick you can use if you practice when messing about
with car or motorbike engines. You multigrip the screwdriver near
the top and insert into screw. You put pressure down but get
ready to twist in the relevant direction depending on whether you
want to tighten or loosen and which way the thread goes. As you
hit down hard with the hammer on the top of the screwdriver you
coordinate a good solid twist on the grip. Trust me, it works!)

But it is pretty silly to do if you get lucky and actually find
the damn real McCoy, the boxed set of impact fittings along with
the spring-decked-out-hammer-body (always hard, because *rarely*
needed and always getting lost!).

Quoted text here. Click to load it
Perhaps time for you to put up a URL of what you are trying and
in reference to which you can describe things? Now we know it is
a form you want to solve some problem in, I suggest you put up a
valid HTML url and we can take it from there.

Quoted text here. Click to load it
And why would you ever think to do this? You have been seriously
misled. Use tables where there is a meaningful connection between
the contents of the cells. Some people try to pinpoint this by
saying "...where the data is tabular" but it is just another
vague description. You just have to get the idea and it is not a
crisp one.

A table is for organising lists of things and lists of things
usually have some sort of order or overall connection. A form is
often quite "tabular" in that the purpose of each line of most
forms is to display and ultimately to transmit particular data in
an ordered way.


Re: DIV consuming the remaining space

Quoted text here. Click to load it

With no width property on either, but with a table that's wider than the
sum of the columns' preferred maximum widths, usually both columns get
stretched by an amount proportional to their preferred maximum width.

This isn't specified anywhere I don't think.

Quoted text here. Click to load it

Yes. This isn't specified either, but it's usually what happens. Another
way to do this is to set width: 1px on the cell in the first column. It
won't go narrower than its preferred minimum (that part actually is
specified) meaning the other column gets the rest.

Quoted text here. Click to load it

Or OP can use a left float for the first column and make the other a
normal flow div but overflow: hidden so it's a block formatting context.
That will make it fit in the space on the right.

Re: DIV consuming the remaining space

Quoted text here. Click to load it

Yes, and it is interesting trying to nail down the exact way the
proportion formula works in the good browsers that operate the
same way (FF, Safari, Opera). In even a simple two cell table

<table style="width: 1000px;">

even for all values of x and y where neither undergo any wrapping
and where x + y do not cause any overflow beyond 1000px
(substitute 100% if you like), the distribution of the widths of
the cells is not all that obvious to describe in a way that is

Imagine that you are making a browser and it just does one simple
job, it displays visually tables fitting the above description
and nothing else. What algorithm would you tell it to follow? You
could tell it to follow an unintuitive equation (we can make a
pretty good stab at this) but what would you tell it to do
otherwise that makes perfect intuitive sense in a step by step
calculation? Something that results in a left cell being about
340px and a right being 660px when the content of the left is
half the content of the right etc etc etc.

To understand this, compare a different 'challenge', to do the
above in relation to


Here it is as simple as a pimple: You just tell the browser to
make the cell that x is in no wider than it needs to be to fit x
in. And do the same for y. Perfect shrink-to-fit.


Re: DIV consuming the remaining space

Quoted text here. Click to load it

er... come to think of it ... I suppose the answer might be
something like 'add up the parts of lengths, and divide the
widths in proportion to the number of parts one cell has over the
other. Thus, if y is 4 times greater than x, we get 5 parts
altogether and one of 5 parts of 100% is 20%, so the cell with x
gets 20% and the cell with y gets 80%.

I was staring at some odd figures for browsers in practice and I
guess these contained significant rounding errors adapting to
particular resolutions and pixels and screens and the number of
atoms that happened to be in the vicinity, the way the wind was
blowing and the way the planets were aligned at the time... But
of course, the *real pattern* is simple enough I guess... <g>


Re: DIV consuming the remaining space

Quoted text here. Click to load it

In that case don't you usually just get 500px each? But if you put xx in
the first column, and y in the second, you notice the first column is a
lot wider.

The formula is something like: if we just shrink-wrap the table it's
width ends up maybe 30px. So we have 970px to get rid off. Suppose xx is
2.1 times as wide as y in the font we're using. So we split 970px in the
ratio 2.1:1 and share it between the first and second columns.

Quoted text here. Click to load it

Something like the above seems to be pretty much what they do. But when
it comes to shrinking cells it's a slightly different rule.

Suppose you have a two column table with lots of text in the two columns
and the width is short enough that both columns have to wrap. The
columns tend to get a width proportional to the difference between their
longest words and their unwrapped lengths (so-called preferred minimum
and maximum widths respectively)

There are some hints about this in RFC-1942, although it doesn't tell
you everything about what browsers do (and they are all a bit

They probably plan on writing all this up a bit better for HTML5 but
it's not an easy job.

It all gets much more tricky when you consider colspans and percentages.
Suppose you have a table like this:

        <tr><td style="width:100px">xx</td><td>y</td></tr>
        <tr><td style="width:25%">xx</td><td>y</td></tr>

The first column apparently wants to be both 100px wide and also 25%
wide. Well we can make both true by making the whole table 400px wide,
and this is what browsers seem to be expected to do.

But what if they also asked for the table to be 400px wide? In this
circumstance the 400px wins and you try to get the other requirements as
close as you can.

Re: DIV consuming the remaining space

Quoted text here. Click to load it

Depends which case, I was thinking about the quite general one,
albeit a controlled simple general one. Where x and y are filled
with equal width values (eg.  |  or or &nbsp;|&nbsp; or 1|1 or
ab|ab or 200px-wide-img| 200px-wide-img), yes the cells are
exactly equal in width here.

Quoted text here. Click to load it

I have since been going on the theory (there was another post of
mine after this one you are responding to) that the browser
thinks "Ah, three parts (xxy) and xx is two thirds of this little
packet so let's give the cell with the xx in, two thirds of the
width we have to fill up. And the y gets the rest. Anyway that is
what I was thinking.

Here is a url showing some data points with characters in the
simplified case, I forgot to mention I was thinking monospace but
probably am unaware if this quite adds up to each character being
the same width as the others in the example. But never mind, the
situation is not really all that different if we nail it down
with images of known widths:



Quoted text here. Click to load it
Quoted text here. Click to load it

Let's take the last image content table url above. And let's take
the table that has the images in the cells as
70px-wide|10px-wide. Under your interpretation we get the shrunk
idealisation of 80px, right? And we have to "get rid of" 920px.
Now, the image in the left is half as wide as the one in the
right, so splitting up this 920px into ratio 2:1 we get something
like 613.33px and the second cell gets 386.66.

But, looking at the url above at the relevant table, it is more
like 860px.

My present theory calculates it different:

There are 80px of content altogether for this particular table,
right? And the left cell's content is 70px while the right is
10px. We can think of the 70px as being made up of 7 parts of
10px each part. So there are 7 parts of content in left cell and
1 part of content in right cell. That is 8 parts altogether. Now,
according to the idea I had in my last post, one part (of this
particular type of part) of the whole width of the table is 1000
divided by 8, giving 125, right? Now 7x125s is 875. Which is a
figure sort of much closer to what is happening on my screens in
the second url above. I don't know why it is not exactly right!
Browser roundings, screens, pixel renderings...?


Re: DIV consuming the remaining space

Re: <http://tinyurl.com/2wnsxud

Quoted text here. Click to load it

In the test cases I made, I should have zeroed the paddings and
margins that occur in tables by either cellpadding or cellmargin
or the CSS way. Fixed now and the above calculation is slightly
different. Sorry about this. Going through it again:

In the seventh table from the bottom, there are 80px of content
altogether. The left cell's content is 70px while the right is
10px. The 70px is made up of 7 parts of 10px while the 10px
of content in right cell is 1 part. That is 8 parts altogether.

According to one idea I had in a recent post, one part (made of
10px) of the whole width of the table is 1000 divided by 8,
giving 125? Now 7x125s is 875. Which is now exactly what is
happening on my screen with the url above.


Re: DIV consuming the remaining space

Quoted text here. Click to load it

Why half as wide? I thought you just said it was seven times as wide.

Quoted text here. Click to load it

If we divide 1000 up into 7/8 and 1/8 we get 875 + 125.

If instead we start off with 70 and 10 and divide up the remainder in
the proportion, we get 70 + 805 and 10 + 115, which is the same. (This
should not be surprising).

Quoted text here. Click to load it

Don't forget border-spacing and all that kind of stuff.

Re: DIV consuming the remaining space

Quoted text here. Click to load it
That was a typo/braino! Seven times of course...

Quoted text here. Click to load it

I scarcely believe I said this too! I miust have changed the case
in mid post! Should have read "so splitting up this 920px into
ratio 7:1 we get 805px and the second cell gets 115px".

In your idea of "... we split [the remaining after imagining the
shrinkwrap total) in the ratio of [the shrinkrapped individual
widths], you meant to add this extra sharing to the already given
widths allotted to the images. So 805 + 70 gives the 875, and the
second cell is 115 + 10 giving 125.

OK. Our methods reach the same result, I just did not go via the
idea of the shrinkwrapped idealisation figures. They never came
into my calculations for the cases I was imagining.

Quoted text here. Click to load it

I did not for too long! I realised and posted about this since. I
got the right result after zeroing the margins and paddings and

The picture is slightly more complicated for content that wraps
but can be described and it is mildly interesting. It needs some
extra conditions about when the actual content cannot fit in the
width assigned to the table. But I better stop...


Site Timeline