Proper stretching of a table

[Sam Takoy]

Hi,

In the following code, I want the table to appear side by side with the
red div, and to stretch to fill the available space within the green
div. But, in all browsers, the table goes underneath the red div? What's
the proper fix, other than to specify the width on the table, which I
don't want to do? Thanks! Sam

<div style="width: 300px; background: green;">

<div style="height: 100px; width: 100px; background: red; float:
left;"></div>

<table style="width: 100%; background: yellow; float:
left;"><tr><td>Hi</td></tr></table>

<div style="clear: both;"></div>

</div>

 

[Jukka K. Korpela]

In the following code,

As people frequently advice in this group, you should post a URL, not
snippet of code. In this particular case, it might not matter, but a) it's
good to show good example and b) it's easier to check out the situation if
you can just click on an address, instead of setting up a test page and
wondering whether the poster used the magic incantation that makes browsers
behave almost decently ("standards mode" vs. "quirks mode"), etc.

I want the table to appear side by side with
the red div, and to stretch to fill the available space within the
green div. But, in all browsers, the table goes underneath the red
div?

Both div and table elements are block elements, so the default rendering is
that they are displayed as rectangles, one above another in vertical
direction. When you use the CSS setting float: left, this may get partly
changed. But a block element then appears on the right of another only if it
fits there.

<div style="width: 300px; background: green;">

<div style="height: 100px; width: 100px; background: red; float:
left;"></div>

<table style="width: 100%; background: yellow; float:
left;"><tr><td>Hi</td></tr></table>

<div style="clear: both;"></div>

</div>

The key here is the width of the table. By default it will be the minimum
width required by its content, according to fairly complex and somewhat odd
algorithms that browsers apply. But here you have explicitly set it to 100%.
It means 100% of available width, so much do you expect to fit on the left
side of it?

What's the proper fix, other than to specify the width on the table, which
I
don't want to do?

But you _are_ specifying the width of the table! It is difficult to see what
you trying to achieve and what the real problem is (and you surely have a
problem if you set dimensions in pixels), but the question asked seems to
get solved simply by removing the declaration width: 100%.

 

[Neredbojias]

Hi,

In the following code, I want the table to appear side by side with
the red div, and to stretch to fill the available space within the
green div. But, in all browsers, the table goes underneath the red
div? What's the proper fix, other than to specify the width on the
table, which I don't want to do? Thanks! Sam

<div style="width: 300px; background: green;">

<div style="height: 100px; width: 100px; background: red; float:
left;"></div>

<table style="width: 100%; background: yellow; float:
left;"><tr><td>Hi</td></tr></table>

<div style="clear: both;"></div>

</div>

Since you styled the green div 300px and the red div 100px, doesn't the
table need to be 200px (and borderless) to fulfill your criteria?

 

[Sam Takoy]

It will be the _maximum_ width required by its content, unless there
isn't enough width available. In that case it will take all the
available width but will never go narrower than the minimum width
required by the content.


This sounds like the cause of the OP's problem, yes.


He probably wants it to fill the _rest_ of the containing space which
can be done like this:

table { background: yellow }
#left
{
float: left;
width: 100px;
height: 100px;
background: red;
}
#right { margin-left: 100px; }
#fill { width: 100% }

...

<div id="left">
</div>
<div id="right">
<table id="fill">
<tr><td>table</td></tr>
</table>
</div>

The extra div "right", being a block and not a table, fills all the
width available (containing minus its own left margin in this case)
automatically. We then make the table 100% of that.

Nice solution. Thank you!

 

[Sam Takoy]

It will be the _maximum_ width required by its content, unless there
isn't enough width available. In that case it will take all the
available width but will never go narrower than the minimum width
required by the content.


This sounds like the cause of the OP's problem, yes.


He probably wants it to fill the _rest_ of the containing space which
can be done like this:

table { background: yellow }
#left
{
float: left;
width: 100px;
height: 100px;
background: red;
}
#right { margin-left: 100px; }
#fill { width: 100% }

...

<div id="left">
</div>
<div id="right">
<table id="fill">
<tr><td>table</td></tr>
</table>
</div>

The extra div "right", being a block and not a table, fills all the
width available (containing minus its own left margin in this case)
automatically. We then make the table 100% of that.

Actually, why doesn't this create a gap that equals 100px (left-margin)
between #left and #right? I thought that the idea of margins is that
they reserve a space that won't be occupied by any neighbors. Thanks.

 

[dorayme]

On 8/27/2010 3:10 AM, Ben C wrote: .... .....

Actually, why doesn't this create a gap that equals 100px (left-margin)
between #left and #right? I thought that the idea of margins is that
they reserve a space that won't be occupied by any neighbors. Thanks.

Because that's not really the idea. To get the side by side,
floats are used to stop the block elements flowing as normal,
(namely, going to a new line). Normal bets are off where floats
are concerned because they are out of the normal flow (the way a
browser would treat elements without CSS positioning of any kind)
and things in the flow do not see them.

The margin given to div of id="right" - leaving out conditions
about borders etc - is the distance between it left edge and the
right edge of the containing element, in this case, body. In
Ben's HTML/CSS, the containing block for the div of id="left" is
the body. The body usually has a little margin of it own by
default, easily disposed of with body {margin: 0;}, if this is
done the div of id="right" will be 100px to the right of the
viewport's left edge. Lots of things can *float* in there and
lots of things can be absolutely positioned in there.


<body>
<div style="margin-left: 400px;">stuff</div>
</body>

allows a lot of extras to be *appear* in this 400px space to the
left of this div if they are floated or absolutely positioned or
even relatively positioned. In a suitably wide viewport.

 

[dorayme]

The margin given to div of id="right" - leaving out conditions
about borders etc - is the distance between it left edge and the
right edge of the containing element, in this case, body.

Sorry,I cut out stuff about borders and should have amended this
to read


The margin given to div of id="right" - leaving out conditions
about borders etc - is the distance between its left edge and the
left edge of the containing element, in this case, body.