CODEWITHSUNDEEP
javascriptjquerycsshtml
Ralph Slate
Ralph Slate

Reputation: 61

How to prevent child div from expanding parent without specifying width of parent?

I'm hoping to get someone to clean out the cobwebs of my brain on this one. I have tried to illustrate here (system won't allow me to post a GIF so I went with ASCII art)

|--------------------------------------------------------------------|
| Browser Window                                                     |
|                                                                    |
| |--------------------------------------------------|               |
| |  Parent DIV                                      |               |
| |                                                  |               |
| |  |-----------------------------------------|     |               |
| |  | Child DIV #1                            |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |-----------------------------------------|     |               |
| |                                                  |               |
| |                                                  |               |
| |  |-----------------------------------------|     |               |
| |  | Child DIV #1                            |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |                                         |     |               |
| |  |-----------------------------------------|     |               |
| |                                                  |               |
| |                                                  |               |
| |--------------------------------------------------|               |
|                                                                    |
|                                                                    |
|                                                                    |
|                                                                    |
|--------------------------------------------------------------------|

I would like to have a parent DIV that contains 2 child DIVs. Child div #1 has a long paragraph in it. Child DIV #2 contains variable width content which is displayed in a table.

I would like the parent DIV to expand to the width of Child DIV #2, and I would like Child DIV #1 to only expand to the width of the parent DIV, and not expand the parent any further.

I have all 3 DIVs set to float:left.

If I only include child DIV #2, the parent DIV expands to the width of the table (plus padding, etc) - just what I want. As soon as I include DIV #1, the parent DIV expands to the width of the browser window because Child DIV #1 is that wide too.

I could constrain the width of the parent DIV, however I don't want to do this because of the variable width of child DIV #2. I could constrain the width of child DIV #1 but I don't want to do this because I would like it to be the same width as child DIV #2 and DIV #2 has a variable width.

I would not like to constrain any heights because the amount of content in each box is variable.

Is there another approach to get these results?

Thanks,

Ralph

Upvotes: 5

Views: 1765

Answers (2)

falsarella
falsarella

Reputation: 12437

Interesting question. I tried a lot before surrendering to a js solution, but the only way that I could get these results was doing what Hope I Helped suggested in his answer.

I came here with a working sample:

Basically, using jQuery, you could code something like that:

$(document).ready(function() {
    $('#div1').css('width', $('#div2').css('width'));
});

Upvotes: 1

Caranicas
Caranicas

Reputation: 149

Im not entirely sure I understand you, but I would try removing float:left from both inner divs. I would set the width of the parent to auto and the width of child 1 to 100%. This should allow the parent to size itself to the larger div (child 2), and then have child 1 expand to the size of its container. I hope this helps. Also if you could post a js fiddle to let me see what you have I might be able to help better.

Upvotes: 0

Related Questions