tables breaking out of DIVS: why, oh why?

[johnnyivan]

Hi Folks,
I'm still struggling to make table-less pages - CSS layout is NOT easy at
all, even with a good book. This page however has a table for displaying
images in amongst text [it's in the Content Management System - I have to
work with it].

<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

The trouble is: the table is longer than its container DIV at some browser
dimensions, so it breaks out of the bottom of it - overlapping it, ALSO:
pushing the following DIV out of the way. I don't know either (A): Why the
table doesn't just stay in the containing DIV or (B): why the containing DIV
doesn't stretch with it.

Can anyone help?
Thanks
John

[edited by: DrDoc at 4:31 pm (utc) on Nov. 9, 2004]

[benihana]

welcome to WebmasterWorld!

is the table floated within the div?

can you post a little code snippet?

[johnnyivan]

Hi ben
Thanks for the interest and help! Are you sure you want to see this? Not sure what you mean by floating tables. Well, here goes...

-----------

<div id="content">
<!-- CONTENT ELEMENT, uid:47/textpic [begin] -->
<a name="47"></a>
<!-- Header: [begin] -->
<div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Brand Strategy Information</h1></div>
<!-- Header: [end] -->
<table width="219" border=0 cellspacing=0 cellpadding=0 align="right">

-------------

/*-- MIDDLE COLUMN --*/

div#col_middle {
margin-top: 20px;
margin-left: 170px;
padding: 0;

/*border: 1px solid #000;*/
}
div#header {
}
div#section_title {
margin: 20px 10px 10px 20px;
}

div#content {
padding: 60px 10px 150px 45px;
font-size: .9em;
line-height: 1.5em;

background-color: #FFF;
background-image: url(../images/middle/bkg_curve_crnr.gif);
background-position: left top;
background-repeat: no-repeat;
}
div#related_content {
padding-left: 20px;
margin: 20px 20px 20px 20px;
font-size: .85em;
line-height: 1.5em;
border-left: 1px dotted #F66013;
}
/*--div#wai_badge {
Float: left;
padding-left: 35px;
margin-bottom: 0;
font-size: .85em;
line-height: 1.5em;
border-left: 1px dotted #F66013;
vertical-align: baseline;
}--*/
div#content_bottom {
text-align: right;

height: 55px;
padding: 0px;

background-image: url(../images/middle/bkg_curve_crnr2.gif);
background-color: #FFFFFF;
background-position: left bottom;
background-repeat: no-repeat;
border: 1px solid #000;
}