Styling elements in CSS to position the form button outside of the table enclosed within the form

I'm attempting to position a form button outside the table shown below, using float or another method:

<form action="./deleteentry.php" method="post">
    <?php
        foreach ($dbr as $var) {
    ?>
            <tr>
                <td><?php echo $i; ?></td>
                <td><?php echo $var["title"]; ?></td>
                <td><?php echo $var["year"]; ?></td>
                <td><?php echo $var["author"]; ?></td>
                <td><?php echo $var["condition"]; ?></td>
                <td><?php echo $var["genre"]; ?></td>
                <td><?php echo $var["publisher"]; ?></td>
                <td><input type="radio" name="order" value="<?php echo $i; ?>"/></td>
            </tr>
    <?php
        $i++;
        }
    ?>
<br /><br />
<div class="delshift">
    <input type="submit" value="Confirm" />
</div>
</form>

The desired outcome is illustrated in the following image. What CSS properties should be applied to my form and div elements? The current styling for my div element is as follows:

.delshift{
    float: right;
    overflow: hidden;
    clear: both;
}

Apologies for the large image.

Answer №1

Your provided code is lacking valid HTML as it lacks the table element wrapping your tr tags. To make it work, you can wrap your tr's in a table and float both the table and the div containing the submit button to the left.

Here is the basic structure:

<form>
    <table style="float:left;">
        <?php code ?>
    </table>
    <div style="float:left;">
        <input type="submit" />
    </div>
</form>

Answer №2

Give this a shot:-

<form action="./deleteentry.php" method="post">
<div style="width:100%;">    
<?php
        foreach ($dbr as $var) {
    ?>
            <tr>
                <td><?php echo $i; ?></td>
                <td><?php echo $var["title"]; ?></td>
                <td><?php echo $var["year"]; ?></td>
                <td><?php echo $var["author"]; ?></td>
                <td><?php echo $var["condition"]; ?></td>
                <td><?php echo $var["genre"]; ?></td>
                <td><?php echo $var["publisher"]; ?></td>
                <td><input type="radio" name="order" value="<?php echo $i; ?>"/></td>
            </tr>
    <?php
        $i++;
        }
    ?>
<br /><br />
</div>
<div class="delshift">
    <input type="submit" value="Confirm" />
</div>
</form>

Answer №3

To align the div that contains a table on the left, use float: left.

<div style="float:left">
<form action="./deleteentry.php" method="post">
   <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>3</td>
                <td>4</td>

            </tr>
   </table>
<br /><br />
</div>
<div>
    <input type="submit" value="Confirm" />
</div>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS: How to automatically scroll to the bottom of a div

I cannot seem to scroll to the last message in my chat window. var app=angular.module('myApp', ['ngMaterial'] ); app.controller('ChatCtrl', function($window, $anchorScroll){ var self = this; self.messageWindowHeight = p ...

Refine the inventory by using data-price attributes to narrow down the product selection

While I have successfully implemented the filtering of the product list based on store and brand in my code, I am facing challenges in filtering it with price range. <div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" d ...

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

Having difficulty retrieving the Area and Range information in ChartJS

I am new to working with HTML5 and ChartJS. I have noticed two different types of declarations when attaching JS Chart Versions 1.0.1 and 2.1.1. Can you please provide some insight into this? Additionally, I am facing an issue where the stripes behind the ...

a fixed width layout with two columns aligned at the top

I've been struggling to design a two-column, top-aligned layout with fixed width for data that will be inserted into text in a WebView for an iPhone app. The first column needs to have a set width so the items in the second column can align perfectly. ...

Click on the link to trigger the function that retrieves the value from the element with the ID "email"

I am completely new to HTML and JavaScript and currently building a website using Wix.com. The website will only consist of a text box and a button. While Wix.com is a user-friendly site builder, it lacks full HTML editing capabilities. This means I have ...

Proper Alignment of Div Elements

Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...

Ways to gather all the elements on each page

Currently engrossed in a web scraping endeavor for a car website utilizing Selenium. One potential roadblock I've encountered is that the code seems to only iterate over the initial car element on the page, instead of going through the entirety of ava ...

Why is the format incorrect when the Angular 7 (Change)-Function on Input of type Date isn't functioning?

I am facing an issue with updating the date using key input and assigning the selected date to a property of my object. Below is the code I'm currently working with: <input type="date" [value]="dateTime()" (change)="setDate($event)"/> The dat ...

What is the best way to align the action buttons on this webpage?

I'm struggling to center both buttons on the page. I've tried using margin:0 auto 0 auto; in the position property, but it doesn't seem to work. Strangely, when I used a table instead of a div, it worked. I'm curious to know why I can&a ...

Update a div's content with a click

I'm looking for a way to update the data in my div whenever I click on a link that reveals the div. Despite finding many similar answers, none have worked for me. Here's what I have: I have multiple divs that become visible when clicking on lin ...

Facing the issue of missing data-icons while retrieving HTML content through AJAX requests

My php function generates grid data that appears like this: <div id="_gridData"> <div class="ui-grid-b"> <div class="ui-block-a mobile-grid-header">&nbsp;</div> <div class="ui-bloc ...

Enhancing game menus for various mobile screen sizes

I've noticed a consistent pattern in the games I download from the Google Play Store - they all have a background image at the menu with clickable buttons. When testing these games on different devices, I found that the backgrounds didn't stretch ...

What is the best way to apply various styles using the ng-style directive in different scenarios?

When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results. <div ng-style=" ...

Unlocking the Potential of Larger jQuery Icons

In a recent announcement, the jQuery team unveiled new icons for their UI components. However, I have been unable to locate any examples of how to use them or where they can be downloaded from. Also, it appears that the themes in the ThemeRoller only provi ...

Three divs arranged side by side with responsive design for mobile viewing

This code generates 3 divs for display. However, I am looking to optimize them for mobile devices. What steps can I take to accomplish this? Currently, the divs are oriented to the left and are not visible on a mobile device. I would like them to display ...

CSS: "Cutting-edge" design. In what way?

I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. A ...

Tips on utilizing browser scroll for horizontal overflow of internal div?

I'm working on creating a dynamic page with a tree-like structure that easily exceeds the width of the browser window. My goal is to enable horizontal scrolling for the entire page using the browser's scrollbar, without needing a separate scrollb ...

Convert JavaScript objects into HTML format

Alright, I've got some JavaScript that's fetching data from a JSON file through a URL. Now, my goal is to convert each object (author_name, rating, author_url) into JavaScript IDs so that I can easily reference them in my HTML. For instance: &l ...

Tips for safeguarding primary design elements from modifications by user-contributed styles in a text entry box

Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...