I am creating a one-page application that has a few elements. In general, the top left part of the page should show an image, and to its right should be a table (along with another item called "hintsDiv" in the source below). All I've mentioned should occupy space at the top of the form.
Then, below those, a form for selection control, and another table that lists livestreams should appear.
Here is a portion of the source my app is creating at present:
headingLink {
color: white;
text-decoration: none;
}
.freeze-table {
border-spacing: 0;
padding: 0;
}
thead th {
top: 0;
position: sticky;
background-color: #666;
color: #fff;
z-index: 20;
min-height: 30px;
height: 30px;
text-align: left;
}
.incomplete {
color: red;
font-weight: bold;
}
.invalidValue {
background-color: red;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr.selected,
td.selected {
background-color: yellow;
color: black;
}
.currentActive {
background-color: yellow;
font-weight: bold;
}
tr.unsaved,
td.unsaved {
background-color: orange;
color: black;
}
th,
td {
padding: 0 5px;
outline: 1px solid #ccc;
border: none;
outline-offset: -1px;
padding-left: 5px;
}
tr {
min-height: 25px;
height: 25px;
}
td {
text-wrap: nowrap
}
pageElement {
display: flex;
flex-wrap: nowrap;
align-items: center
}
* {
padding: 0;
margin: 0;
}
.fit {
/* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
.imgbox {
display: grid;
width: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}<!DOCTYPE html>
<html lang='en'>
<head>
<title>Livestreams</title>
<script async src="https://www.youtube.com/iframe_api"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
</head>
<body>
<div id='fullPageDiv' style='width: 100%; overflow:hidden;'>
<div id='player_hints_songs'>
<div id="YouTubeVideoPlayer" style='overflow:hidden; float:left; width:300px'>
<img src="https://web.lovelady.com/siteImages/bunnyfuzz.jpg" style="width:300px; height:300px" alt="placeholder">
</div> <!-- YouTubeVideoPlayer -->
<div id='hints_and_songs'>
<div id='hintsDiv'>
<label for="selectSong">Matching songs:</label>
<select name='selectSong' id='selectSong' onchange='selectedSongFromHints(this) ;'>
<option value='Song suggestions:'>Songs matching "Cool "</option>
<option value='COOL WATER 0'>Cool Water (Marty Robbins cover)</option>
<option value='THAT AINT COOL 1'>That Ain't Cool</option>
</select>
</div><!-- hintsDiv-->
<div id='songsDiv'>
<table id='songsTable'>
<thead>
<tr>
<th style='text-align:center;'>Sav</th>
<th style='text-align:center;'>Clr</th>
<th style='text-align:right;'>Time</th>
<th style='text-align:left;'>Song title</th>
<th style='text-align:left;'>Category</th>
<th style='display: none;'>SaveArea</th>
<th style='display: none;'>ids</th>
</tr>
</thead>
<tbody>
<tr onclick='selectSongRow(this, 0) ;' id='perf_row_0'>
<td style='text-align:center;'><input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked onclick='savePerfSong(this, 0);'></td>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td><input type='text' id='perf_time_0' name='perf_time_0' style='text-align:right;' minLength='4' maxLength='7' size='7' value='0:20' onkeyup='changedPerfTime(this, 0);'></td>
<td><input type='text' id='perf_title_0' name='perf_title_0' style='text-align:left;' minLength='4' maxlength='80' size='50' value="You Don't Bring Me Flowers" onkeyup='changedPerfSong(this, 0);'></td>
<td><input type='text' id='perf_cat_0' name='perf_cat_0' style='text-align:left;' minLength='0' maxLength='15' size='10' value='' onkeyup='changedPerfCat(this, 0);'
onblur='leftTheTitleField(this, 0);'></td>
<td style='display:none;'><input type='text' id='perf_save_0' name='perf_save_0'></td>
<td style='display:none;'><input type='text' id='perf_ids_0' name='perf_ids_0' value='773;;;'></td>
</tr>
<tr onclick='selectSongRow(this, 1) ;' id='perf_row_1'>
<td style='text-align:center;'><input type='checkbox' id='perf_saved_1' name='perf_saved_1' checked onclick='savePerfSong(this, 1);'></td>
<td style='text-align:center;' onclick='clearSongRow(1);'>✖</td>
<td><input type='text' id='perf_time_1' name='perf_time_1' style='text-align:right;' minLength='4' maxLength='7' size='7' value='' onkeyup='changedPerfTime(this, 1);'></td>
<td><input type='text' id='perf_title_1' name='perf_title_1' style='text-align:left;' minLength='4' maxlength='50' size='50' value='' onkeyup='changedPerfSong(this, 1);'></td>
<td><input type='text' id='perf_cat_1' name='perf_cat_1' style='text-align:left;' minLength='0' maxLength='10' size='10' value='' onkeyup='changedPerfCat(this, 1);'
onblur='leftTheTitleField(this, 1);'></td>
<td style='display:none;'><input type='text' id='perf_save_1' name='perf_save_1'></td>
<td style='display:none;'><input type='text' id='perf_ids_1' name='perf_ids_1' value='773;;;'></td>
</tr>
<tr>
<td colspan='7' style='text-align:center'>
<button id='completeButton' type='button' onclick='markComplete(this, 773, false);' style='margin: 5px 10px auto;'>Mark incomplete</button>
<button id='incompleteButton' type='button' disabled onclick='markComplete(this, 773, true);'>Mark complete</button>
</td>
</tr>
</tbody>
</table>
</div><!-- songsDiv -->
</div><!-- hints_and_songs -->
</div> <!-- 'player_hints_songs'-->
<div id='form_and_streams'>
<div id='formDiv'>
<form method='POST' action=/YouTube/performed.php>
<table>
<tr>
<td><input type = 'checkbox' name='filterFromDate' id='filterFromDate' checked>
<label for='filterFromDate'>Earliest date</label>
</td>
<td><input type = 'text' name='fromDate' id='fromDate' size=10 value='06/20/2016'>
</td>
<td><input type = 'checkbox' name='filterToDate' id='filterToDate'>
<label for='filterFromDate'>Latest date</label>
</td>
<td><input type = 'text' name='toDate' size=10 value=''>
</td>
<td><input type = 'checkbox' name='omitCompleted' id='omitCompleted' checked>
<label for='omitCompleted'>Omit if completed review</label>
</td>
</tr>
</table>
<br>
<input style='margin-left: 10px;' type='submit' name='submit' value='Submit'>
<input style='margin-left: 10px;' type='submit' name='backToYouTubeStuff' value='GoBack'>
<input style='margin-left: 50px;' type='button' name='prevPageButton' id='prevPageButton' onclick='prevPage();' value='Prev page'>
<input style='margin-left: 50px;' type='button' name='nextPageButton' id='nextPageButton' onclick='nextPage();' value='Next page'>
<br>
</form>
</div><!-- formDiv-->
<div id='livestreamsDiv'>
<br>
<table id='livestreamsTable'>
<thead>
<tr>
<th>Started</th>
<th>Noted</th>
<th style='text-align:right;'>Duration</th>
<th><span style='margin-left:30px;'>Livestream Title</span></th>
</tr>
</thead>
<tbody id='livestreamsBody'>
<tr id='livestream_row_0'>
<td style='text-wrap:nowrap;' id='livestream_date_0'>2018-12-23 17:18</td>
<td style='text-align:right;' id='livestream_songCount_0'></td>
<td style='text-align:right;' id='livestream_elapsed_0'>0:20:09</td>
<td><span onclick='selectVidId("n3tSP_imMI", 0, "livestream_row_0", "1280", "720");'>First Sunday</span></td>
</tr>
<tr id='livestream_row_1'>
<td style='text-wrap:nowrap;' id='livestream_date_1'>2018-12-24 18:16</td>
<td style='text-align:right;' id='livestream_songCount_1'></td>
<td style='text-align:right;' id='livestream_elapsed_1'>0:15:17</td>
<td><span onclick='selectVidId("qtcQtqsaTU", 1, "livestream_row_1", "1280", "720");'>Live from the Lights Display</span></td>
</tr>
<tr id='livestream_row_2'>
<td style='text-wrap:nowrap;' id='livestream_date_2'>2019-01-06 07:31</td>
<td style='text-align:right;' id='livestream_songCount_2'></td>
<td style='text-align:right;' id='livestream_elapsed_2'>0:19:04</td>
<td><span onclick='selectVidId("c4y42xI6_o", 2, "livestream_row_2", "1280", "720");'>Jun 26 Follow the sun</span></td>
</tr>
</tbody>
</table>
</div> <!-- livestreamsDiv-->
</div> <!-- forms_and_streams -->
</div><!-- This is the "page" division (the whole page after the form) -->
</html>Things are pretty much the way I want, except that, unexpectedly, the div named forms_and_streams does not appear to the left margin (below the image). There must be some attribute I've missed on div to cause them to align just so, but I don't see it. I suppose I could switch to flex, but that seems like another learning curve that I hope might be avoided for this project. (Maybe not as daunting as it first appears?)
Is there an easy fix to force the "form_and_streams" div to align below the image (in other words, below "player_hits_songs" ?
