div - viewable area vs. containter

KnotGoblin · Jul 13, 2005

I am trying to move a web application from tables to using more <div>'s.

IE:
I am having a problem with a <div> inside of a <div>. The nested div (header and footer) does not stretch to the full width of its containing <div>. It seems to be only staying in the viewing window--not it's containing div. As you decrease the size of the window the nested div decreases as well. if you decrease the viewing window to a smaller size than the table this becomes more obvious.

Firefox:
When the viewing window is too small the containing div stays with in the viewing window while the table is stretched beyaond the window.

NOTE: Th
here's the css:

Code:

#main
{
    border: solid 1px Gray;
}

.header, .footer
{
    color: White;
    background-color: Black;
}

here's the html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <body>
        <div id="main">
            <div class="header">Header</div>
                <table border="1" width="100%">
                    <tr>
                        <td>Proin ullamcorper.</td>
                        <td>Etiam vel wisi.</td>
                    </tr>
                    <tr>
                        <td>Pellentesque mollis augue nec leo.</td>
                        <td>Proin ullamcorper</td>
                    </tr>
                </table>
            <div class="header">Footer</div>
        </div>
    </body>
</html>

So i quess my question is:
How do I keep the nested <div>'s width 100% of the containing <div> even if the viewing window is smaller in IE.

In FF how do I keep the table inside the div.

Hope this makes sense. Kinda hard to explain.
thanks.

-Jer

KnotGoblin · Jul 13, 2005

oh yeah.

the table is also in a <div>

but it still does the same thing.

-Jer

Vragabond · Jul 13, 2005

First, add a proper doctype to the page. That might help. (

http://www.w3.org/QA/2002/04/valid-dtd-list.html)

Second, either you're not giving us all the code, or something is very strange. Since you're not using any fixed widths and heights, everything should work out in the way to accomodate for everything. Table will not contract beyond the width of the longest non-breaking word in a cell but so should the containing divs (unless there is specific width specified). Either you have simplified the code too much to show the problem or you are experiencing something extremely weird. Do you have an online example?

KnotGoblin · Jul 13, 2005

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html>
    <head>
        <style>
            #main
            {
                border: solid 1px Gray;
            }

            .header, .footer
            {
                color: White;
                background-color: Black;
            }
        </style>
    <head>
    <body>
        <div id="main">
            <div class="header">Header</div>
            <div>
                <table border="1" width="100%">
                    <tr>
                        <td>Proin ullamcorper.</td>
                        <td>Etiam vel wisi.</td>
                    </tr>
                    <tr>
                        <td>Pellentesque mollis augue nec leo.</td>
                        <td>Proin ullamcorper</td>
                    </tr>
                </table>
            </div>
            <div class="footer">Footer</div>
        </div>
    </body>
</html>

Ok this works fine when the table is not contracted all the way.

The problem occurrs when the window in narrower than the fully contracted table. In the web application the table is rather large so a table could easlisy stretch beyond a non-maximized window.

Problems:

IE:
When the window in narrower than the table the header/footer <div>'s are only as wide as the viewing window--not their containing <div>.

Firfox:
The header/footer <div> is the correct size, but the border around the main div contracts to fit in the viewing window, not the table. so the table stretches out of the border.

i've tried to state my problem in a better way, but i may have repeated myself.

would it help to float anything?

thanks

-Jer

KnotGoblin · Jul 14, 2005

well, since this one was such a stumper, I guess I will have to answer it myself.

DRUM ROLL, PLEASE!!!

[symbolsplash][/symbolsplash]

Code:

#main
{
    float: left;
}

No my friend, your eyes did not deceive you. It was that simple.

Since CSS is so much better than using tables why couldn't any of you genii figure that one out.

thanks.

-Jer

BabyJeffy · Jul 14, 2005

Since CSS is so much better than using tables why couldn't any of you genii figure that one out.

It's always satisfying to solve the problems... well done in solving this one! Your quote above says it all really!

Cheers [smile]

Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

Foamcow · Jul 14, 2005

Since CSS is so much better than using tables why couldn't any of you genii figure that one out.

When you understand about the benefits of separating content from presentation then you'll know why it's preferable to use CSS to structure and style a page of content over using a table.

Nice comment by the way. You are obviously a very clever and well adjusted individual. Bravo for you.

Incidentally, I doubt many of the regular posters were that inclined to attempt to solve your problem... taking into account your obvious superior intellect and all that.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

kaht · Jul 14, 2005

Since CSS is so much better than using tables why couldn't any of you genii figure that one out.

It's because we were all too busy learning how to spell cymbal correctly.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

KnotGoblin · Jul 14, 2005

When you understand about the benefits of separating content from presentation then you'll know why it's preferable to use CSS to structure and style a page of content over using a table.

I agree. I am trying to change my paradigm of webpage layout. I am beginning see the advantages.

It's because we were all too busy learning how to spell cymbal correctly.

Haha. very good. as a percussionist i should be ashamed.

I hope all realize that my previous post was very much tongue-in-cheek. I need to stay in good standing, because I am sure to be frequenting this forum.

Nonetheless, thanks.

-Jer

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

div - viewable area vs. containter

KnotGoblin

Technical User

KnotGoblin

Technical User

Vragabond

Programmer

KnotGoblin

Technical User

KnotGoblin

Technical User

BabyJeffy

Programmer

Foamcow

Programmer

kaht

Programmer

KnotGoblin

Technical User

Similar threads

Part and Inventory Search

Sponsor