Dennis
Reputation: 1167
HTML div alignments
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" ?
Upvotes: 0
Views: 54
Answers (2)
Raven
Reputation: 1
this will be my first help.
What causes that error in your project is that you specify a custom size for the image. At first, I tried to fix it from the style side, but since you specify a custom size for the image, it does not prioritize the style codes.
I have corrected your code a little bit with my own perspective :) Here you go
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Livestreams</title>
<style>
.tableTitle tr th {
padding: 10px;
}
.songTitle {
width: 420px;
}
.buttons button {
margin-right: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-4">
<div id="YouTubeVideoPlayer">
<img src="https://web.lovelady.com/siteImages/bunnyfuzz.jpg" style="width:400px; height:400px"
alt="placeholder">
</div> <!-- YouTubeVideoPlayer -->
</div>
<div class="col-8">
<div class="selectSong mb-3">
<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>
<div class="songsTable mt-3">
<table class="table">
<thead>
<tr>
<th style="text-align: center;">Sav</th>
<th style="text-align: center;">Clr</th>
<th style="text-align: right;">Time</th>
<th class="songTitle">Song Title</th>
<th style="text-align: center;">Category</th>
</tr>
</thead>
<tbody>
<tr onclick='selectSongRow(this, 0) ;' id='perf_row_0'>
<th scope="row">
<input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked
onclick='savePerfSong(this, 0);'>
</th>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td style="text-align: right;">
<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_save_0' name='perf_save_0'></td>
</tr>
<tr>
<th scope="row">
<input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked
onclick='savePerfSong(this, 0);'>
</th>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td style="text-align: right;">
<input type='text' id='perf_time_0' name='perf_time_0' style='text-align:right;'
minLength='4' maxLength='7' size='7' value=''
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=""
onkeyup='changedPerfSong(this, 0);'>
</td>
<td><input type='text' id='perf_save_0' name='perf_save_0'></td>
</tr>
<tr>
<th scope="row">
<input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked
onclick='savePerfSong(this, 0);'>
</th>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td style="text-align: right;">
<input type='text' id='perf_time_0' name='perf_time_0' style='text-align:right;'
minLength='4' maxLength='7' size='7' value=''
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=""
onkeyup='changedPerfSong(this, 0);'>
</td>
<td><input type='text' id='perf_save_0' name='perf_save_0'></td>
</tr>
</tbody>
</table>
</div>
<div class="buttons mt-5 justify-align-center d-flex justify-content-center">
<button type="button" class="btn btn-secondary " id='completeButton' type='button'
onclick='markComplete(this, 773, false);'>Mark incomplete</button>
<button type="button" class="btn btn-success" id='incompleteButton' type='button' disabled
onclick='markComplete(this, 773, true);'>Mark complete</button>
</div>
<div class="form_and_streams mt-4">
<div class="formDiv">
<form action="POST" action="/YouTube/performed.php" class="table2 ">
<table class="table mt-5">
<tbody>
<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>
</tbody>
</table>
</form>
</div>
</div>
<div class="livestream mt-4">
<table class="table">
<thead>
<tr>
<th scope="col">Started</th>
<th scope="col">Noted</th>
<th scope="col">Duration</th>
<th scope="col">Livestream Title</th>
</tr>
</thead>
<tbody>
<tr>
<td id='livestream_date_0'>2018-12-23 17:18</td>
<td id='livestream_songCount_0'></td>
<td 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>
<td id='livestream_date_1'>2018-12-24 18:16</td>
<td id='livestream_songCount_1'></td>
<td 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>
<td id='livestream_date_2'>2019-01-06 07:31</td>
<td id='livestream_songCount_2'></td>
<td 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>
</div>
</div>
</div>
<script src='performed.js?modified=1738374550'></script>
<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script>
const CONST_IS_IPAD = '';
const CONST_IS_ANDROID = '';
const CONST_DEVICE_TYPE = 'unknown';
const CONST_HIGHLIGHT = '#FDFF47';
const CONST_LOG_WRITER = 'HTTP/1.1://web.lovelady.com/writeLog.php';
const CONST_JS_APP_NAME = 'performed.php';
const CONST_JS_LOG_NAME = '/usr/local/log/performed-2025-01.log';
const CONST_KEYWORD_LOG_ERROR = 'logError';
const CONST_NO_BACKUP = 'noBackup';
const CONST_MAX_PLAYER_WIDTH = '640';
const CONST_MAX_PLAYER_HEIGHT = '480';
const URL_SRC = 'https://web.lovelady.com/YouTube/performed.php';
let livestreamSongsComplete = true;
</script>
</body>
</html>
Upvotes: 0
ReadyTools
Reputation: 109
Maybe #form_and_streams is not aligning below #player_hints_songs.
The #form_and_streams div is not appearing below #player_hints_songs because #YouTubeVideoPlayer is using float: left;. This causes layout issues, making it difficult to position elements correctly.
#fullPageDiv {
display: flex;
flex-direction: column;
width: 100%;
}
#player_hints_songs {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
}
#YouTubeVideoPlayer {
width: 300px;
flex-shrink: 0;
}
#hints_and_songs {
flex: 1;
}
#form_and_streams {
width: 100%;
margin-top: 20px;
}
Upvotes: 0
Related Questions
- How can I vertically center a div element for all browsers using CSS?
- Retrieve the position (X,Y) of an HTML element
- Change an HTML input's placeholder color with CSS
- How to make a div 100% height of the browser window
- How can I make a div not larger than its contents?
- Make a div fill the height of the remaining screen space
- How do I create an HTML button that acts like a link?
- Why does HTML think “chucknorris” is a color?
- HTML 5: Is it <br>, <br/>, or <br />?
- HTML: Valid id attribute values?