Develop Reference

Is there a value of TOP in CSS that can dynamically position an element based on the length of the previous element?

I am very new to CSS..
I would like to know if there is a way to dynamically position a div element based on the length of the previous div element.
Example:
<div id="A">
</div>
<div id="B">
</div>
<div id="C">
</div>
If these div elements were full width each and i want one to come after the other based on the length of the previous one without adjusting the length on the top property myself.
Is this possible or is there any top value that can be used?
Thank you so much.

As of now, there is no way that you can style a div (or any other element for that matter) dynamically on the basis of a previous element. But you have some options here -
either you can use Javascript to manage the styles of elements dynamically, or,
you can use CSS FlexBox Model or CSS Grid to position and change height/width of elements, which is highly recommended and super powerful for making any layout of your choice.
Here are some places which I used to learn flexbox -
freeCodeCamp flexbox tut
Brad Traversy flexbox crash course
Now for CSS grid-
Brad Traversy CSS Grid
freeCodeCamp CSS Grid

Complex html layout with div

I want to do some kind of naval battle game in HTML5/Javascript using drag and drop on a grid (composed of div elements). The starting point is a div with 20 * 20 identical cells.
I have to perform some complex layout like in the image below and this layout may be dynamically modified by Javascript (e.g. when a ship is moved).
I know how to perform merged row cells but I cannot find out how to merge columns (like in the example below).
Is it possible with divs or would you recommend a table?
_______________________
|__|__|__|__|__|__| |__|
|__|__|__|__|__|__|__|__|
|__|__|_____|__| |__|
|__|__|__|__|__|_____|__|
|__|__|__|__|__|__|__|__|
Sorry for not posting a nicer image but my reputation is too low to post images.

To be simple use a table, you have the rowspan and colspan properties. But for ease of maintenance, I recommend not using a table, and designing a div layout similar to how Bootstrap implements div based table layouts. http://getbootstrap.com/css/#tables
If your design has to be responsive, you do not want to use table, td, tr elements, you will need to come up with a div based layout.
Other table layout libraries/techniques: http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/

I would use a grid with div's. An place the boats on top of the grid with an image and store boat info as class properties on a per cell basis.

combination of bootstrap with jquery should be possible, for example:
<div class="container">
<div class="row">
<div class="col-xs-3 shipSize3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-6 shipSize6"></div>
</div>
</div>
then you would be able to just change class with jquery(.removeClass(),.addClass()):
if (shipSize3 === 'killed'){
$('div').removeClass('shipSize3');
} else {}

It is possible, here is the code.
Screenshot:

Make table cells responsive and make them evenly square, filling the window

I want to make table cells responsive - even squares filling all available space(window).
If table width is 100% - it takes all available space, distributing cells evenly but only horizontally. I have written small javascript with jquery, calling this function on window resize event:
function windowReszie(){
$("td").each(function(){
$(this).css({"height":$(this).width()});
})
}
But this approach is slow, because I have a lot of cells - is there a way to do it just with css or any other better , faster way?

I see some problem with your approach, you're computing the width for every cell.
I'd do something along the lines of
function windowReszie(){
var size =$("td").width();
$("td").height(size);
}
Another approach would be to set a class and change the css rule associated with the class, but that could be a bit tricky (see : Changing a CSS rule-set from Javascript)

try adding class only at first <td> in <tr> and then loop over that class... no need to check every <td> item.

Create horizontal ScrollableView with dojox.mobile

I am struggling to use dojox.mobile.ScrollableView for scrolling horizontally: I have a
<div data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">
which contains several div elements which float left. However, in this case the elements are not displayed in one single row:
http://jsfiddle.net/wf6NZ/
I could place another div in the ScrollableView with a width set to the sum of all widths plus margins:
http://jsfiddle.net/N7MrD/
However, this requires calculation of the resulting width of all elements which I want to avoid.
So the question is: Is it possible to achieve the results of the second link without the helper div?

Try to define the style 'white-space: nowrap' in any container div.
For example,
<div id="view" style="white-space:nowrap" data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">

Is it possible to display a results array in a defined number of columns using only client side scripting?

I have an array of images/links that need to be displayed in columns of 8 for however many rows there are, but I can not control this array.
Is it possible to format this using CSS/HTML (or as a last resort Javascript) so that a new row is created after x items is displayed?

Yes its very possible by using a fix sized container and css float property.
for e.g.
<div style="width:600px;">
<div style="width:200px;float:left;" >
your data here
</div>
</div>
You can create the similar code using javascript. Iterate throught the inner div container and after the 600px limit it will automatically start a new line.