Grow your CSS skills. Land your dream job.

Rules for Expanding DIVs

  • # January 18, 2010 at 9:42 am

    I’m hoping someone can tell me if what I’m trying to do is possible.

    I would like to have a parent DIV with 2 child DIVs.

    I would like the parent DIV to expand its width to the size of one of the child DIVs, and would like the other child DIV to be contained by the parent’s width.

    I would like to do this without fixing the width of the parent DIV.

    Think of it this way: Let’s say I have 2 tables. I would like the content of the 1st table to set the width of the parent DIV, and I would like the 2nd table’s width to be constrained by the width of the parent DIV.

    All attempts at doing this result in the text in the 2nd DIV expanding the parent until it is at 100% of the page width. Any tips would be appreciated. The only way I’ve gotten it to work is by either fixing the width of the parent DIV (which I don’t want to do, because the content in the 1st child DIV is variable width) or by using absolute positioning

    Here’s a link to the page I’m trying to fix:

    http://www.hockeydb.com/ihdb/stats/leag … 82001.html

    I don’t have all the DIVs on the page yet, but I’ve tried various combinations with no luck. On that page, I would like the width of the parent DIV to be set by the first table, and the second table would conform to that width. You can see how the text in the second table stretches the DIV. The first table is variable width because the team and coach names are variable.

    Thanks,

    Ralph Slate

    Rob
    # January 18, 2010 at 10:17 am

    omg my head just exploded. haha

    Can you tell us about what you are trying to do, and how it’s meant to work? That might help in the explanation of things :) I think I get what you are saying, but if you could tell us why there might be a different way to do it?

    # January 18, 2010 at 6:13 pm

    Yes, basically, I have the content on each page on my site in one main DIV container. Most of my content is displayed in the form of tables, and I often can’t constrain the width of the tables because of the variability of the data.

    I would like to sometimes put some text below the table. Often that text is long.

    I want the table to set the width of the DIV container, and I want the text to respect that boundary.

    As you can see in my example, that isn’t happening. The text is causing the parent DIV to expand horizontally to fill the screen. That is in turn pushing the page’s sponsor below the fold when it should be to the right of the content.

    Thanks,

    Ralph

    Rob
    # January 18, 2010 at 6:58 pm

    Hey :)

    Just to clarify is the bit you want on the right the "Notes" bit? :D I take it that it is because its a long string pushed under the tables… :)

    # January 19, 2010 at 11:35 pm

    Yes, in the example I posted, I have two tables. They are currently not contained within 2 DIVs, but they could be.

    I want the top table to set the width of the parent DIV, I want the bottom table to respect that width.

    I want the 2 tables to appear on top of each other, not side-by-side.

    Ralph

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".