Question

The Context:

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.

It will help to take a look at my current build example with Firebug/the like to understand what I’m doing.

---

Requirements:

Each subsection (Outpost Personnel, Outpost Defense), needs to have a number of divs:

1) The background image & subsection container (div id= outpostPersonnel in this example)

2) Sub-sub section container for each side of the listing, left and right. (Think newspaper paragraph.)

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

4) Div that stretches with n number of additional roster names. (div id = overflowCommandTags, overflowPersonnelTags, )

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)

---

The Problem:

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.

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

If you firebug my current build example, you’ll see that the parent div (outpostPersonnel) extends way the heck down, even though none of its child divs are that tall.

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.

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?

Thank you for bearing with me this far!
Cheers!

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

Answer 1

There are a few things to mention here but I’ll start with the reason for the gap in between the two sections.

From what I can see from your inline styles you have used position: relative and varying top andleft values to achieve the desired layout. On the element with ID personnelContainer you have added top: -230px. This is what is causing the gap.

When you position an element relatively you have to imagine that the element is in its original position and that you’ve just visually moved it. In other words, moving the element does not change the flow of the page, so applying the negative top value as in your example will not change the height of the container. (good reference: http://reference.sitepoint.com/css/relativepositioning)

With this in mind, you could go the route of applying minus top values to each of the sections that follow in order to close the gap, however you are likely to find that this complicates matters further and leads to overlapping content.

The best advice I can give is to read the following articles on floated layouts:
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html

Relative positioning has its applications but in this case you should use the float property to achieve your layout. If you read the articles above it will give you a good grounding in floated layouts and how to ensure your sections contain everything correctly. As long as you don’t set any fixed heights on any of the child elements you will find they expand to accommodate any amount of content.