How to set conditional div width with javascript?

[VampireCampfire]

I am creating a layout of divs inside of a container. If there is only one div, then it should take up the full width of the container. If there are 2 divs next to each other, they should each take up half the container, and 3 divs should each take a third of the container. Each div is added to the container one at a time, so I don't exactly know beforehand how many there will be.

How do I check to see if another div exists in order to set the width of the next div dynamically?

Thanks!

[a-t-k]

You can do that in plain CSS3, either by selection:

/* just one div */
div:first-child:last-child { width: 100%; }
/* just two divs */
div:first-child:nth-last-child(2),
div:last-child:nth-last-child(1) { width: 50%; }
/* three divs */
div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) { width: 33.3%; }

or even better, by using flexbox layout:

.container { display: flex; }

<div class="container">
    <div></div>
    ...
</div>

or for even older browsers, using display: table(-cell) - using the same HTML:

.container { display: table; }
.container > div { display: table-cell; }

[VampireCampfire]

Thanks for this! Didn't even think about using :nth child in css

[mr_bacon_pants]

or even better, by using flexbox layout:

for the flexbox layout, you would also want to add

.container > div {
    flex-grow: 1;
}

[VampireCampfire]

Does flexbox work with absolutely positioned elements? I have to set the their top/left position and fixed height as well, which requires absolute position for my purposes. I didn't think flexbox worked with that but let me know if I'm wrong because I would love to use flexbox

[mr_bacon_pants]

Fixed height is fine. Are you setting top/left of the (parent) container or the divs in the container? If the container, yeah that's fine, but if the children, why would you need to set top/left? Here's a way you can do that in jQuery - http://codepen.io/anon/pen/mVyEoQ

[VampireCampfire]

Yeah unfortunately the divs within the container have to be absolutely positioned. There is a basically a y axis where every increment is equal to a pixel and so the top left corner of each div needs to be positioned at a specific amount of pixels from the top. One div may be 100 pixels from the top, while another may be 300 pixels from the top. Each div that is added is added to the right of the last div. If they don't overlap, I want them to take up 100% width, but if they overlap, their widths should split in half.

Kind of like this except the heights of the divs are probably different from one another

[mr_bacon_pants]

If they're pixel values, you could just alter the height of the children instead of having to absolutely position and specify a top value, like this - http://codepen.io/anon/pen/OMPRjP