Difficulty aligning floated buttons in HTML and CSS

I am struggling with aligning the accept/decline buttons on my website. The cancel button is being pushed too far to the right because of the float: right; command I used, and I can't figure out how to properly align it.

<?php

echo'
<html>
<head>
<style>

p
{ 
    border: 1px solid black; 
    width: 22%; 
    text-align: left
}

label
{
    display: inline-block;
    float: left;
    clear: left;
    width: 300px;

    text-align: left;
    padding: 5px;
}

input 
{
  display: inline-block;
  float: right;
}  


left
{
float: left;
padding: 5px;
}

</style>
</head>
</html>';

$conn = mysqli_connect('localhost', 'root', 'admin', 'Users');
MYSQLI_SET_CHARSET($conn, "UTF8");

echo '
<FORM ACTION = "Script.php" METHOD = "POST">
    <div>
        <p> 
            <label>Username:    <input type = "TEXT" name = "ID">  </label>
            <br>
            <label>Name:          <input type = "TEXT" name = "name"></label>
            <br>
            <label>Surname:     <input type = "TEXT" name = "surname">  </label>
            <br>    
            <label>Address  <input type = "TEXT" name = "address"></label>
            <br>
            <left><input type = "submit" value = "Accept"></left>
            <input type = "submit" value = "Cancel">
            <br>
            <br>
            <br>
            <br>
            <br>
        </p>
    </div> 
</form>';

    if(ISSET($_POST["ID"])  && ISSET($_POST["name"])  && ISSET($_POST["surname"])  && ISSET($_POST["address"]))
    {
        $ID = mysql_real_escape_string ($conn, $_post["ID"]);
        $ime = mysql_real_escape_string ($conn, $_post["name"]);
        $priimek = mysql_real_escape_string ($conn, $_post["surname"]);
        $naslov = mysql_real_escape_string ($conn, $_post["address"]);

        MYSQLI_query ($conn, "insert into place ( ID, name, surname, address)
        VALUES (".$id." , ".$name." '.' ".$surname." , ".$address.")");

        if(MYSQLI_AFFECTED_rows($conn) ==0)
            ECHO "Information not added! ";
        else
            ECHO "Information successfully added! ";
    } 
?>

Answer №1

To ensure proper layout when using the float css property, consider using either div style="clear:both;" or div class="clearifix"

This will help prevent any unexpected behavior in your design.

Answer №2

insert

<div class="clearfix"></div>

prior to

<input type = "submit" value = "Decline">
 <input type = "submit" value = "Approve">

Answer №3

<div class="empty"></div>

using CSS

.empty
{
clear:both;
}

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

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

Adding an audio event listener in HTML5

I am having trouble maintaining the limited loop functionality in my HTML5 audioplayer when I try to replace it with buttons and add event handlers to them. The repeat function only seems to work if the checkbox is checked and the second option of the se ...

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

The presence of element a within the element ul is not permitted in this particular scenario. Additional errors from this section will not be displayed

Having trouble with this code snippet: <nav role="navigation"> <div id="menuToggle"> <input type="checkbox"/> <span></span> <span></span> <span></span> ...

I have always wondered about the meaning of " + i + " in Javascript. Can you explain it to

<script> var x,xmlhttp,xmlDoc xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "cd_catalog.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("CD"); table="<tr><th>Artist</th><th>Ti ...

Declaring an array that holds Angular components in Angular 11: What's the best approach?

I'm trying to implement a feature in my Angular component where I can create a list that displays content from other components. My current approach involves declaring an array that contains references to different Angular components: import { Compone ...

Retrieving the first and last names of users by joining the friends table

After successfully retrieving the friend's ID for user 75, I'm facing a challenge in selecting users.firstname and users.lastname from the users table for these friend IDs. Removing the IF statement, as suggested by a friend, is not an option as ...

The display of data attributes is not being rendered correctly

Check out the fiddle I'm currently working on: http://jsfiddle.net/7Z8wY/9/ The HTML section looks like this: <div class="container"> <div class="right"> <div id="cityList" class="inner-table"></div> </div> ...

Modifying the CSS class of an element does not produce the desired effect after altering its styles using JavaScript

html: <input id="myinput" class="cinput" type="image" src="http://www.foodwater.org.au/images/triple-spiral-3-small-button.jpg"/> <br><br><br><br> <button id="s">set to visible class</button> <button id="h"> ...

What is the limit of CSS includes that IE can process?

While working on theming Drupal, I encountered an unusual issue. After enabling a few modules that added 5 to 10 link tags to the page, I noticed a strange behavior in different browsers. Firefox successfully added the new stylesheets to the cascade, but i ...

Enhance Your Website with Jquery and Bootstrap 4: Imrpessive Navbar Effects for Resizing

Hello, I am facing a challenge that my novice mind is struggling to overcome. Utilizing Bootstrap 4 navbar and some jquery, I managed to create a transition where an initially invisible navbar transforms into a solid color when the user scrolls beyond a ce ...

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

What are the steps to create a connect4 board featuring rounded corners and curved sides?

How can I create a Connect4 board with the exact styles and properties shown in the image? I want to achieve the curved sides effect as displayed. Can this be done using only HTML elements, or is there an easy SVG solution available? Here is my current co ...

The variants array in VUE.js is not displaying properly

I have recently been delving into vue.js for my work and encountered a significant issue. I wanted to create a simple TODO application. In my index.html file, I only have a div for a header and a root div with an ID: #app. Inside the root div, there is a ...

Scrollbar customization feature not functional in Firefox browser

I recently finished developing a website and I have customized the main vertical scrollbar. Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox. Does anyone have any suggestions on how to trouble ...

gap between the main content and the anchored bottom navigation

Working on a homepage using Bootstrap 4 with a navigation bar fixed to the bottom and a carousel above it. It looks good on desktop/tablet, but facing issues on mobile views. There's an unwanted white space between the carousel and the navigation on ...

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

It seems that Evernote editor uses a Rich Text Editor which differs from the input or textarea tag. Therefore, I am unable to use the provided code to determine its type. Is there a way to retrieve the current element of the Evernote editor where the curso ...

Rearrange elements with a custom breakpoint trigger

Having four items with varying sizes lined up in a row can present some challenges. While larger screens may display them perfectly, issues arise on large screens (1199.98px/bootstrap 'lg') that require re-ordering of the div items. Specifically ...

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...