How to arrange HTML components in rows

Normally when you write a sketch and add HTML components such as divisions, paragraphs, buttons, sliders, ..., HTML just puts them at the end of the file, filling the page as if they were written as part of that page as demonstrated by the "no parent" and "Again no parent" buttons at the end of this page. Using some id, parent, and style options, we can do much better as shown above.

The light aqua "p5" division was setup and styled in the HTML file in order place it between the title and these comments. It would have been possible to manipulate its style with the p5js code, desired.

Some notes:

Many of the items and colors in this page were picked randomly. The page will look different each time you reload or refresh it.
The first 10 components in the p5 division are put there in order just by setting their parent to "p5". The numbers represent the order of insertion, that is, the order in which their parent was specified. Textual components state the type of the component before the meaningful text.
Next a paragraph announcing "Method 1" and the division for "Row 1" were added next. The components in the "Method 1" section were randomly assigned a size and color. The numbers represent the order of insertion. Most are divisions. The parent for each item is the division for their row. They were arranged using the "float: left" style. Using "float: right" would anchored the components on the right side in a right to left order.
Next a paragraph announcing "Method 2" and the division for "Row2" were added next. Its divisions were randomly assigned a size and color. Each division in that row contains a span and the component specified at the top of the division. They were initially absolutely positioned using the position() method. The width is random but top was assign to the top of the division for "Row 3" in setup(). The coding has to calculate horizontal position based on the width of divisions on its left. Because of the absolute positioning, the parent does not matter much in this case so they were assigned "p5" as their parent but their parent could have been the division for "Row 2"
Finally the paragraph announcing "Method 3" and its division were added. The row's division specifies the optional "text-align: center". "display: in-line-block" had to be specified for each element. This is clearly the easiest way to center divisions horizontally.
Methods 1 and 3 are differently easier to use. However, vertical alignment in Method 3 may be a problem depending on the types and contents of the elements. In general, the elements (even divisions) are aligned so that the bottom rows of text are aligned (assuming the element included text). However some browsers (notably Chrome based ones) align using the top row of text in buttons. Vertical alignment might not be a problem in many situations, especially if background colors and borders are not used and elements have the same height. Experimenting with vertical alignment is beyond the scope of this page.
What happens if the height of something above an item changes? Experiment with the slider near the top of the page. Elements with default or float positioning are adjusted according. The programmer must add code to adjust when absolute positioning is used.
What happens if the width of something on the left changes? Experiment with the slider in Method 1. Again elements with default or float positioning are adjusted accordingly. The programmer must add code to adjust absolute positioning.
In this sketch the adjustments in absolute positioning are done in the inputChanged() method when "Dynamic" has been chosen in the drop down select box near the top of the page. In the setup() method, these statements:
s3.input(inputChanged); where s3 is the top slider
sel7.changed(inputChanged); where sel7 is the select (drop down) near the top
method1Div[2].input(inputChanged);
method1Div[2].mouseReleased(inputChanged); where method1Div[2} is the slider in Method 1.
were added to associate the function with the slider and the select (drop down) box.
The function inputChanged contains to code restyle and resize the chosen components. In addition, when "Dynamic" has been chosen it will locate the "Row 2" components correctly. The Static/Dynamic option would rarely be used in real programs where "Dynamic" positioning would almost always be used.
What is the difference between input() and changed() functions? The easy way to think about them is to consider input to mean "is changing" while changed means "was changed" at least in terms of sliders.
To simplify the creation of new random components, this program uses:
- function myCreateElement(tag, content, parent, style) which extends createElement(tag, content).
- function randomColor(aMin, aMax) which extends color(r, g, b) by picking random values for r, g, and b having values between aMin and aMax.
- function randomSize(aMin, aMax) writes (a portion of) a CSS style by picking random widths and heights between aMin and aMax.
These functions are stored in http://www.brinkje.com/p5js/SomeFunctions.pjs.
If the width specified by the slider for adjustable width elements in any row is too big, it is interesting to see what happens when the width of the components in a row exceed the available space. The result depends on the positioning method used.