Aligning a left-aligned span with inline input buttons while floating to the right

I am struggling with aligning buttons to the right side of a div while keeping everything displayed in line. Currently, the buttons appear below the span rather than beside it. I have attempted setting the button's display to "inline" and "inline-block", but neither seems to produce the desired result. Can anyone provide guidance on how to achieve this?

<div>   
  <span>blah</span>
  <input type="submit" name="button2" value="button2" class="floatRight" />
  <input type="submit" name="button1" value="button1" class="floatRight" />
</div>

The class "floatRight" is : 

.floatRight { float: right }

I am using IE 11

htmlcssasp.netforms

Answer №1

When working with spans and inputs, they naturally appear inline. However, to achieve the desired appearance you want, it is recommended to float the buttons to the right:

http://jsfiddle.net/uniqueuser/example123/

.floatRight {float:right}

Check out the fiddle for reference.

Answer №2

Experiment with this snippet of HTML code:

<div class="container">
    <span>text</span>
    <input type="submit" name="btn2" value="Button 2" class="pullRight" />
    <input type="submit" name="btn1" value="Button 1" class="pullRight" />
    <div class="clearFix"></div>
</div>

Don't forget to add the following CSS:

.clearFix {
    display: block;
    content: '';
    clear: both;
}
.pullRight {
    float: right;
}

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

What is the best way to conceal text that overflows from a div and seamlessly return to the beginning once the end of the text has been reached?

I am struggling to figure out how to hide the overflow text that is spilling out of the div. I attempted using overflow: hidden;, but unfortunately, it didn't work as expected. Additionally, I would like the text to loop back to the beginning once it ...

javascripthtmlcssanimationslide

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

javascriptcss

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Why is it not recognizing styles and showing an error? All paths seem correct, styles and scripts are connected, but it's either not reading them at all (styles) or displaying an error. Here is the html, javascript, css code. How can this error be fix ...

javascripthtmlcss

Tips for verifying that a file has not been selected in Croppie

Whenever I use croppie to crop images on my website, everything works fine when I select an image and upload it. But if I try to crop and upload without selecting an image, a black image gets uploaded instead. How can I validate if the file upload is empty ...

javascriptphpjqueryhtmlcodeigniter-3

Revamp every single hyperlink that ends in .html

I am looking to customize the URLs on my website to appear like this: www.example.html/1 www.example.html/2 www.example.html/3 instead of their current format: www.example.html/1.html www.example.html/2.html www.example.html/3.html Can anyone provide a ...

htmlapache.htaccessweb

Concerns arise regarding the implementation of an image slider using HTML and CSS

Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...

htmlcssanimationslider

Ways to conceal a div using ng-hide

Is there a way to make a div disappear using ng-hide? I have this code and I'm trying to hide the div with id="ApagarNA". The code displays a table with values, but some rows contain N.A in all 4 columns, and I want to hide those specific rows. For e ...

htmlangularjs

What is the best way to instruct npm to generate a .min.css file from scss?

Currently, I have setup a process to automatically compile CSS from SCSS using a JSON script. However, the issue is that the ".min" suffix is being removed during this compilation. Here is the output from the terminal displaying the script I am running and ...

cssnpmsassnpm-scripts

Issues are arising with the .mouseover functionality within this particular code snippet

Learning Javascript has been a challenge for me so far. I tried following a tutorial, but the result I got wasn't what I expected based on the video. I'm wondering why that is and how I can fix it. I'm aiming to make a box appear suddenly w ...

javascriptjqueryhtmlcss

Tips on concealing the visibility of a table row using PHP

My HTML table structure is quite simple: <style> .demo { width:100%; border:1px solid #C0C0C0; border-collapse:collapse; padding:5px; } .demo th { border:1px sol ...

phphtmlcss

Rotating the camera in Three.js using touch controls and device orientation

Currently, I am working on a 3D project using three.js where I want to enable camera control with mouse for computers and touch events/device orientation for smartphones. A good reference for this is this website. On the PC version, I have successfully imp ...

javascripthtmlthree.jsdevice-orientation

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

javascripthtmlangularjs

How to pass arguments to a function within a preg_replace in PHP

Greetings! I currently have a situation similar to this: $content = preg_replace('#(\s*)\<pre(.*?)\>(.*?)\</pre\>(\s*)#sie', 'dostuff(\'\\3\', \'\\2 ...

phphtmlregexstring

Utilizing Ajax to fetch a div element from a web page

Hey there! I have a link set up that loads a page into a specific div ID, which is #ey_4col3. The issue I'm facing is that it loads the entire page along with all its contents, but what I really want to load from that page is just the content within ...

javascriptjqueryhtmlcssajax

The combination of the card hover effect and the bootstrap modal creates complications

Hey there! I'm in the midst of crafting a webpage using Bootstrap and EJS. My aim is to craft a modal window that pops up when a specific button is clicked to display extra information, and upon clicking an X or "close" button, the modal should disapp ...

javascriptcssbootstrap-5

Verifying Role Permissions for Method Accessibility through Unit Testing

How can I test whether an authorize attribute on a method or controller in a WebApi/MVC project has specific role(s)? For example, is it possible to test a method like the one below? [Test] [TestCase("Put", new []{"Admin","TeamMember"})] [Tes ...

c#asp.netasp.net-mvcunit-testingasp.net-web-api

Setting a HttpHeader in a HttpModule and retrieving it from a Page

I attempted to create my own IHttpModule that inserts a new Header into the request: public class CustomModule: IHttpModule { public void Init(HttpApplication app) { app.BeginRequest += delegate{app.Response.AddHeader("CustomHeader", "Cust ...

c#.netasp.nethttp-headershttpmodule

Choose an Option that Does Not Allow PHP as a Value

Currently, I am retrieving a value from the database where interval days are set to 5. However, when I display it, it always shows '0' within my option form. <?php $interval_day = $this->crud_model->auto_order_interval_day(); ?> ...

phphtml

Utilizing JavaScript in Protractor, explore a list to identify the selected checkboxes and those that remain unchecked

Currently, I am working on developing an end-to-end test using Protractor. My main objective is to extract the names from a list and then determine which checkboxes have been selected and which ones haven't. To check the state of the checkbox, I pla ...

javascripthtmlangularjsprotractor

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

javascriptcssreactjs