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
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.
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.