Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post

    Collapsible Column with Floats

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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).
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    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:

    Code:
    <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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    yes, but was hoping that wouldn't be necessary... sounds like it is.

    thanks for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •