Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Proper stretching of a table

Reply
Thread Tools

Proper stretching of a table

 
 
Sam Takoy
Guest
Posts: n/a
 
      08-27-2010
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>
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      08-27-2010
Sam Takoy wrote:

> 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%.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      08-27-2010
On 26 Aug 2010, Sam Takoy <(E-Mail Removed)> wrote:

> 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?

--
Neredbojias

http://www.neredbojias.org/
http://www.neredbojias.net/
 
Reply With Quote
 
Sam Takoy
Guest
Posts: n/a
 
      08-27-2010
On 8/27/2010 3:10 AM, Ben C wrote:
> On 2010-08-27, Jukka K. Korpela<(E-Mail Removed)> wrote:
> [...]
>>> <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.

>
> 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.
>
>> 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?

>
> This sounds like the cause of the OP's problem, yes.
>
>>> 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%.

>
> 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!
 
Reply With Quote
 
Sam Takoy
Guest
Posts: n/a
 
      08-27-2010
On 8/27/2010 3:10 AM, Ben C wrote:
> On 2010-08-27, Jukka K. Korpela<(E-Mail Removed)> wrote:
> [...]
>>> <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.

>
> 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.
>
>> 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?

>
> This sounds like the cause of the OP's problem, yes.
>
>>> 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%.

>
> 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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      08-27-2010
In article <i57pmq$5lr$(E-Mail Removed)-september.org>,
Sam Takoy <(E-Mail Removed)> wrote:

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

....
> > 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>
> >

.....
>
> 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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      08-27-2010
In article <(E-Mail Removed)>,
dorayme <(E-Mail Removed)> wrote:

> 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.

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: stretching <table heigth="100%"> don't work Eliyahu Goldin ASP .Net 0 01-03-2007 12:41 PM
Table stretching excessively in IE Arthur Dent ASP .Net 4 03-07-2006 03:27 PM
stretching the background image instead of tiling =?Utf-8?B?U3JpZGhhcg==?= ASP .Net 3 11-30-2005 11:32 AM
I2C slave clock stretching praveen.kantharajapura@gmail.com VHDL 1 06-14-2005 09:02 AM
Image Stretching Lee Harris HTML 1 10-27-2003 02:18 PM



Advertisments