How to position an item where I want it horizontally on the web page?

Question 1

I’m working on a web page where I have a table and above the table I want a drop-down menu with the menu positioned above the table’s rightmost column. As a general question how do I move something to where I want it horizontally? I’ve tried using text align, using position, and am currently using a flex display with justify-content.

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #666666;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: ">\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}
#breadcrumb-team{
    text-decoration: none;
    color: black;
}

.favorite-star{
    align-content: center;
    float: right;
    padding-top: 50px;
    font-size: 24px;
}
.favorite-star input[type="checkbox"] {
    display: none;
}

.favorite-star span {
    cursor: pointer;
    color: transparent;
    -webkit-text-stroke: 1px black;
}
.favorite-star input[type="checkbox"]:checked + span {
    color: gold;
    -webkit-text-stroke: initial;
}
.season-dropdown {
    text-align: right;
}
.dropdown-container {
    display: flex;
    justify-content: center;
}


/* Style for the dropdown select element */
#season-select {
    padding: 5px; /* Reduce padding to make it smaller */
    font-size: 14px; /* Adjust font size */
    border: 1px solid #999;
    border-radius: 5px;
}
table {
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 15px;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #999999;
}

tr:hover {
    background-color: #ddd;
}
.opponent-logo{
    height: 40px;
    width: 40px;
}


.main-indiv-team img {
    float: left;
    flex-grow: 1;
}

.main-indiv-team h1 {

    font-size: 24px;
    font-weight: bold;
}

.main-indiv-team p {
    font-size: 16px;
    font-style: italic;
}

.main-indiv-team {
    display: flex;
    justify-content: center;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-name-star {
    display: flex;
    clear: both;
}

.name-nickname {
    flex-direction: column;
    float: left;
    padding-top: 50px;
}

<body>

<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/questions/77033977/homepage.html">Home</a></li>
    <li><a href="Teams.html">Teams</a></li>
    <li><a id="breadcrumb-team">Boise State</a></li>
</ul>
<div class="main-indiv-team">
    <div class="center-content">
        <div class="logo-name-star">
            <img src="/sportsJSON/collegeFootball/logos/boiseState.png">
            <div class="name-nickname">
                <h1>Boise State</h1>
                <p>Nick Name: Broncos</p>
            </div>
            <label class="favorite-star">
                <input type="checkbox">
                <span>★</span>
            </label>
        </div>
    </div>
</div>
<div class="dropdown-container">
<div class="season-dropdown">
    <label for="season-select">Season:</label>
    <select id="season-select">
        <option value="2022">2022</option>
        <option value="2021">2021</option>
        <option value="2020">2020</option>
    </select>
</div>
</div>
<table class="team-opponent-table">
    <tr>
        <th>Opponent</th>
        <th>W/L</th>
        <th>Score</th>
    </tr>
    <tr>
        <td><img class="opponent-logo" href="www.collegefbarchive.com/teams/Oregon-State" src="/sportsJSON/collegeFootball/logos/oregonState.png" alt="Oregon-State-logo">Oregon State</td>
        <td>L</td>
        <td>17 - 34</td>
    </tr>
    <tr>
        <td><img class="opponent-logo" href="www.collegefbarchive.com/teams/New-Mexico" src="/sportsJSON/collegeFootball/logos/newMexico.png" alt="New-Mexico-logo">New Mexico</td>
        <td>W</td>
        <td>31 - 14</td>
    </tr>
</table>
</body>

Here’s a snip of what I currently have. The table is centered on the page and I’m attempting to have my drop-down menu over the scores column.

edit: added more context for the body section

Question 2

OK, I have made the changes in your new codes.

In the html, I only added 2 containers (inner-wrapper and outer-wrapper) to wrap the dropdown and the table.

Here are the CSS changes:

/* step-1 */
/* for centering the table and the dropdown*/
.inner-wrapper{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

/* step-2 */
/* after centering the table and the dropdown then right aligning the dropdown */
.dropdown-container{
    align-self: flex-end;
}

/* step-3 */        
/* finally centering the wrapper to the viewport (you can use another container instead of the body tag if you want */
.outer-wrapper{
    text-align: center;
}

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #666666;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: ">\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}
#breadcrumb-team{
    text-decoration: none;
    color: black;
}

.favorite-star{
    align-content: center;
    float: right;
    padding-top: 50px;
    font-size: 24px;
}
.favorite-star input[type="checkbox"] {
    display: none;
}

.favorite-star span {
    cursor: pointer;
    color: transparent;
    -webkit-text-stroke: 1px black;
}
.favorite-star input[type="checkbox"]:checked + span {
    color: gold;
    -webkit-text-stroke: initial;
}
.season-dropdown {
    text-align: right;
}
.dropdown-container {
    display: flex;
    justify-content: center;
}


/* Style for the dropdown select element */
#season-select {
    padding: 5px; /* Reduce padding to make it smaller */
    font-size: 14px; /* Adjust font size */
    border: 1px solid #999;
    border-radius: 5px;
}
table {
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 15px;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #999999;
}

tr:hover {
    background-color: #ddd;
}
.opponent-logo{
    height: 40px;
    width: 40px;
}


.main-indiv-team img {
    float: left;
    flex-grow: 1;
}

.main-indiv-team h1 {

    font-size: 24px;
    font-weight: bold;
}

.main-indiv-team p {
    font-size: 16px;
    font-style: italic;
}

.main-indiv-team {
    display: flex;
    justify-content: center;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-name-star {
    display: flex;
    clear: both;
}

.name-nickname {
    flex-direction: column;
    float: left;
    padding-top: 50px;
}


/* added codes ========================================*/
/* step-1 */
/* for centering the table and the dropdown*/
.inner-wrapper{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

/* step-2 */
/* after centering the table and the dropdown then right aligning the dropdown */
.dropdown-container{
    align-self: flex-end;
}

/* step-3 */        
/* finally centering the wrapper to the viewport (you can use another container instead of the body tag if you want */
.outer-wrapper{
    text-align: center;
}
/* added codes ========================================*/

<body>
<ul class="breadcrumb">
    <li><a href="https://stackoverflow.com/questions/77033977/homepage.html">Home</a></li>
    <li><a href="Teams.html">Teams</a></li>
    <li><a id="breadcrumb-team">Boise State</a></li>
</ul>
<div class="main-indiv-team">
    <div class="center-content">
        <div class="logo-name-star">
            <img src="/sportsJSON/collegeFootball/logos/boiseState.png">
            <div class="name-nickname">
                <h1>Boise State</h1>
                <p>Nick Name: Broncos</p>
            </div>
            <label class="favorite-star">
                <input type="checkbox">
                <span>★</span>
            </label>
        </div>
    </div>
</div>

<!-- here I have added 2 wrappers (inner and outer) -->
<div class="outer-wrapper">
    <div class="inner-wrapper">
        <div class="dropdown-container">
            <div class="season-dropdown">
                <label for="season-select">Season:</label>
                <select id="season-select">
                    <option value="2022">2022</option>
                    <option value="2021">2021</option>
                    <option value="2020">2020</option>
                </select>
            </div>
        </div>
        <table class="team-opponent-table">
            <tr>
                <th>Opponent</th>
                <th>W/L</th>
                <th>Score</th>
            </tr>
            <tr>
                <td><img class="opponent-logo" href="www.collegefbarchive.com/teams/Oregon-State" src="/sportsJSON/collegeFootball/logos/oregonState.png" alt="Oregon-State-logo">Oregon State</td>
                <td>L</td>
                <td>17 - 34</td>
            </tr>
            <tr>
                <td><img class="opponent-logo" href="www.collegefbarchive.com/teams/New-Mexico" src="/sportsJSON/collegeFootball/logos/newMexico.png" alt="New-Mexico-logo">New Mexico</td>
                <td>W</td>
                <td>31 - 14</td>
            </tr>
        </table>
    </div>
</div>
</body>

Leave a Comment Cancel reply