Div is not growing to fit table

Hi,

Ive been learning div and css, had to build a site fully in tables for speed. Now i want to convert it to div and css. I have setup a test 3 column grid that seems to work ok.

3 column: http://www.tlnewsensations.com/divtest.php

When i try and set it to two column. http://www.tlnewsensations.com/formtest.php

It seems the form i paste in vanishes, or else the div isnt growing to fit?

Ideas?
LVL 2
SideasAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BatalfCommented:
The width of your <div id="contentcenter"> is 618 pixels, and the width of the table that is a child element of this div is 771 pixels.

You should decrease the width of your table so that it fits into the 618 pixel wide div, or just remove the outer of the two tables.

Also try to specify a size a little smaller than 618 pixels for the table.

Batalf

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GoofyDawgCommented:
If you really want to convert this to div/css layout, you have to do away with the tables... This is a very basic header/footer, three-column layout that's easily achievable using divs/css. But there are other problems with the HTML code in general that are breaking the page:

1. In addition to the sizing problems that Batalf mentioned, you have two body tags in your code. It's no small wonder this page breaks.
2. There's no closing </html> tag either.
3. If the first <body> tag is removed, we're left with this: <body bgcolor="#ffffff" onLoad="MM_preloadImages... I suppose that this is the one you want to keep because it does your image preloads. Immediately following this code, there's a 123-wide table - your nav table. It's supposed to be enclosed in a div of some sort, but all I see is the closing </div> tag. It must be up higher where the first <body> tag was.

Those are just a couple of the issues that I see. However, let's back up a bit. What you really need to do is get your containers all defined and positioned (and please, not absolutely) before you add content. Once you have the placeholders set, then add your content. It's a much safer approach than trying to wrap existing content with divs. Frankly though, other than your form, you can do all your navigation and content using CSS-driven layout. For instance, here's a menu that's similar to what you want to achieve:

http://home.comcast.net/~bdelumpa1/li/li.html

This was done with an unordered list and some CSS.

All in all though, while I see what you're trying to achieve, even though you're wrapping your tables using some CSS, your use of tables forces you into a rigid design. That pretty much defeats moving to a CSS-driven layout.

If you need help with getting your layout containers built, I'll be glad to help!

GoofyDawg
SideasAuthor Commented:
Wow seems like i still have alot to learn, i didnt think i was that far away :0/

Im going to try look at this shortly, in the meantime a question to both of you.

1) Batalf - my 618px container is also part of the navigation 123px which should be contained by the 771px container. Now i realise my maths was out and made the container 648 (771-123=648). The table with the form is 618px so should fit. I think im a bit confused by what you meant though.

2) Goofydawg -  your link didnt work, please can you check. Any help with containers is cool, just want a 1 header, container with 2 & 3 columns (that grow) and a footer. All centered. I thnik im getting there but when you start adding stuff it all goes a bit wrong. I read the tutorials but it still has me beaten, as in the code isnt making full sense to me yet.

Lastly guys, a few times ive been unsure about awarding points. I think they should be split as you both have given me useful advice, do you agree before i award?
SideasAuthor Commented:
K, im splitting the points as i didnt hear anything back from you about what to do with the points. Thanks for the help.
GoofyDawgCommented:
Sorry I didn't get back to you. Since I can't access my google mail from work, I have to go back to questions manually.... :( The points split was fine. With respect to the link I provided, I just clicked on it and it worked. Did you get a 404 error?

GoofyDawg
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.