Databases
StackOverflow2013
Postsdbo
POCSS & Nested Divs - Parent Div Won't Take Child Height, Overflow:auto not a good fix
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS & Nested Divs - Parent Div Won't Take Child Height, Overflow:auto not a good fix
    text
    copied!<p><strong>The Context:</strong> </p> <p>I'm building out a div roster to use with jQuery or PhP for my roleplaying Star Trek Fleet (nerdy, yes, I know). I need my divs to behave in certain ways to make it robust enough to pull from XML and generate the roster automatically and auto-size my divs to fit however many names are added.</p> <p><strong><em>It will help to take a look at <a href="http://quae.ideagonk.com/art/TFA/LCARS/orders_stackoverflow_example.html" rel="nofollow">my current build example</a> with Firebug/the like to understand what I'm doing.</em></strong></p> <hr> <p><strong>Requirements:</strong></p> <p>Each subsection (Outpost Personnel, Outpost Defense), needs to have a number of divs:</p> <p>1) The background image &amp; subsection container (div id= outpostPersonnel in this example) </p> <p>2) Sub-sub section container for each side of the listing, left and right. (Think newspaper paragraph.)</p> <p>3) The top n number of roster names needed to fill/align to that background image in requirement 1. (div id= initialCommandTags (left side listing) and initialPersonnelTags (right side listing)) </p> <p>4) Div that stretches with n number of additional roster names. (div id = overflowCommandTags, overflowPersonnelTags, ) </p> <p>5) A colour div stripe to make it look like LCARS is still encapsulating the n number of roster names from requirement 4. (div id = colorStretchLeft)</p> <hr> <p><strong>The Problem:</strong> </p> <p>I cannot get the parent subsection- the div from 1 (outpostPersonnel) to adhere exactly to the height of ALL its child divs- all the way down to the height of the overflowCommandTags/overflowPersonnelTags div. </p> <p>One way I've tried it, and the next subsection (Outpost Defense) overlaps the overflowCommandTags div. The other- which is the way I have my example now (and where I gave up)- puts a ~160 pixel high blank space between the end of the overflowTags div and the top of the next subsection (outpostDefense).</p> <p>If you firebug <a href="http://quae.ideagonk.com/art/TFA/LCARS/orders_stackoverflow_example.html" rel="nofollow">my current build example</a>, you'll see that the parent div (outpostPersonnel) extends way the heck down, even though none of its child divs are that tall.</p> <p>Overflow:auto and Overflow:hidden are NOT viable solutions insofar as I have read, since I need the divs to expand fully, and WITHOUT a scrollbar.</p> <p>I'm completely stumped. Watch it be a really simple solution, too. Is it something to do with the fact that the parent div is only a BG, while the child divs have actual content?</p> <p>Thank you for bearing with me this far! Cheers!</p> <p>((Also the reason why my div style stuff is in-line is because I'm embedding this on an Enjin page and I can't call a *.css file.))</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload