Collapsible Column with Floats

[subhailc]

hi,

i've got a css + html layout that has two columns.

when the second (right-hand) column is empty, i'd like it to "collapse" entirely, and allow the first (left-hand) column to expand to the width of the mutual container.

this behavior is native to how a table with one row and two cells/columns would act, but i'm hoping there's a way to do the same thing with floating divs.

thanks in advance.

[abduraooft]

when the second (right-hand) column is empty, i'd like it to "collapse" entirely, and allow the first (left-hand) column to expand to the width of the mutual container.

this behavior is native to how a table with one row and two cells/columns would act, but i'm hoping there's a way to do the same thing with floating divs.

Are you pulling the contents to the right columns from DB or something like that? You may assign an inline style or a particular class to the elements by checking the presence content before loading to the page (or you may even skip echoing the second column, if it's going to be empty).

[subhailc]

thanks for the reply.

yes, the data is dynamic, and so the column may or may not have content.

so using tables, i'd do something like:

<table style="width:100%">
  <tr>
    <td>
     <!-- content generated here -->
    </td>
    <td>
     <!-- content possibly generated here -->
    </td>
  </tr>
</table>

so that if the first column had content, but the second did not, the first column would expand to fill the width of the table's container. if the second column did have content, then the first would resize to accommodate it.

i'm trying to achieve that same principal with divs and floats, but can't find an approach that works, since i either have to specify the width of the two floating columns, or if i omit an explicit width, they expand only to the size of the content, not the containing element.

imagine if each column had a background color or border... if i don't assign width the float (which i can't do, since i won't know before-hand if there will or won't be content), then the border/background of the left-hand column would not fill the entire available space (like the table cells would).

i could test the returned data first, then assign widths as appropriate, but i'm trying to avoid that - for example, in case content is added dynamically later through script (while this is unlikely, i'd like to find an approach that'd work in any case).

is what i'm describing not possible without tables?

thanks again

[abduraooft]

i could test the returned data first, then assign widths as appropriate, but i'm trying to avoid that - for example, in case content is added dynamically later through script (while this is unlikely, i'd like to find an approach that'd work in any case).

You need to assign a width to the floated element to get the desired display. Can't you dynamically alter the widths along with adding the content?

[subhailc]

yes, but was hoping that wouldn't be necessary... sounds like it is.

thanks for your help