Unable to successfully implement float:right on all elements

I may not be a CSS expert, but I thought this would be simple. Unfortunately, my code isn't producing the desired outcome. Below is the code snippet:

<div class="form-group" style="float:right;">
     <p><asp:Button ID="Submit" Text="Login" Visible="true" Enabled="True" CssClass="btn btn-green btn-lg" OnCommand="Login" runat="server" /></p>
     <p><a href="/ForgotPW.aspx">Forgot your password?</a></p>
     <p><asp:Label ID="SuccessMessage" Text="Thank you! Your request was successfully sent." ForeColor="Green" Visible="False" runat="server"></asp:Label></p>
</div>

Here's how it looks:

https://i.sstatic.net/TnAFT.png

The red arrow indicates that I want it aligned to the right side of the div like the other elements in there.

Here are some notes:

  • Only margin-bottom: 15px; css is applied to "form-group".
  • If I apply float:right directly to the button, it works, but then the "Forgot your password?" link moves up beside and left of the button and I can't get it below the button no matter what I try. Super frustrating!
htmlcssasp.netcss-float

Answer №1

To ensure the button aligns to the right, add the CSS property float: right; on it. If you want the link to appear on a separate line, use either clear: both; or display: block;.

Answer №2

Utilize text-align:right to align the paragraph to the right. See Demo 

input {
  width: 90%;
}
form {
  width: 300px;
  border: 1px solid black;
  height: 300px;
}
form > div {
  width: 100%;
  text-align: center;
}
.form-group > p {
  text-align: right;
}
<form>
  <div>
    <p>Username</p>
    <p>
      <input type="text" />
    </p>
  </div>
  <div>
    <p>Password</p>
    <p>
      <input type="text" />
    </p>
  </div>
  <div class="form-group">
    <p>
      <button ID="Submit">Login</button>
    </p>
    <p><a href="/ForgotPW.aspx">Forgot your password?</a>
    </p>
    <p>Thank you! Your request was successfully sent.</p>
  </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

The issue of title attributes in HTML not correctly handling special characters

I'm facing an issue in my code where I want to display the item title in the title attribute. However, when the item title contains special characters or numbers (such as &#174; for ®), it does not get resolved and instead displays the code as it ...

htmlangular

Show a picture on top of another picture

Is there a way to overlay an image and text on top of another image, similar to what is done on this website ? ...

cssimagetext

Elements separated by empty space on a Complex Grid, appearing distant despite the available space

Struggling with creating a complex layout using minimal relative and absolute positioning. Here's the issue I'm facing: All my elements are aligned side by side with only one problem: the border image needs to bleed into the row below. How can t ...

htmlcsslayoutsusy

Utilizing Jquery for deleting text content from a div element

I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...

jquerycsshtmlreplace

Is the website slowing down due to a rise in server requests?

On the website for my office, there are a total of 17 requests made to the server including 3 CSS files, 2 JavaScript files, 11 images, and 1 page request. If 10,000 people were to visit my office site, would this high number of requests cause the website ...

asp.net

Utilizing the power of bootstrap-sass in combination with Ionic 2

I attempted to incorporate some of Bootstrap's mixins into Ionic 2 but encountered an error related to incompatible units that I am struggling to resolve. node_modules\bootstrap-sass\assets\stylesheets\bootstrap\_variables.sc ...

csstwitter-bootstrapangularsass

Tips for dynamically passing a string into a Javascript function

Here is a JavaScript function that I have: function doIt(link) { alert(link); } I am using this function in the following JavaScript code snippet. Here, I am dynamically creating an anchor tag and appending it to my HTML page: jQuery.each(data, func ...

javascriptjqueryhtml

Transferring information from Database dropdown menu and jQuery DatePicker to a mySQL Database

Lately, I've been facing a challenge that I can't seem to overcome. I have a client booking form that includes a dropdown menu linked to a database containing various treatments. Additionally, I've integrated a jQuery DatePicker and I'm ...

javascriptphpjqueryhtmlmysql

Having trouble with your CSS on your mobile website?

After developing a website and implementing media queries for responsiveness, everything seemed to be in perfect working order. The website displayed flawlessly on emulators like () and Chrome's inspect element, mirroring my desired mobile design. How ...

htmlcssmedia-queries

Unable to Modify Header Link Font Color

I've been struggling to change the link color of a header on my website. By default, the link color in my CSS is blue, but I want the links in my entry headers to be gold. I thought this would be a simple task - just define the link color for the hea ...

csswordpress

Switching to a different webpage within a tab using a query string

When the graph is clicked, I need to open a new tab to display some data and send additional information. This is the code I am currently using: Response.Redirect("MonthData.aspx?Name=" + "Preeti" + "&Year=" + (Date.Now.Year).ToString, False) Howeve ...

asp.netvb.net

Changing class membership on the fly

Hey there! I'm having some trouble with my menu. My goal is to remove the 'active' class from one element and add it to the one I click on, but it's not working as expected... <div id="header2"> <div class="menu"&g ...

javascripthtmlclassmenuonclick

Creating a dynamic dropdown menu in HTML to showcase a variety of images

I am trying to create a drop down menu where each selection displays multiple elements. For example, if sensor 1 is chosen, I want to show a picture of its location and its address. I am having trouble figuring out how to add these functions to the drop ...

javascripthtml

Retrieving the selected value from a dropdown menu before it is altered using vanilla JavaScript

I am trying to implement a feature where the previous value of a dropdown is captured when it is changed. Essentially, I need to compare the previous and current values of the dropdown and perform an action based on that information. For example, if Option ...

javascripthtml

Excessive white space within a relative block div causing the content to appear smaller in comparison

Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...

htmlcss

What is the Best Way to Create a Smooth Border-Bottom Transition?

I'm currently diving into the world of HTML5 and CSS. I want to replicate the layout from . Specifically, I am interested in adding a transition effect to the border bottom of certain elements such as "View Our Listings", "The Agency Daily", "Meet our ...

htmlcss

Automatically assign the "Restricted" cursor to disabled fields within a dynamic form

Is there a method in Angular 6/7 that allows the cursor to change to "Not Allowed" when hovering over a disabled field in a reactive form? I prefer not to use CSS for this cursor change. Is there a way to achieve this through Angular alone? Currently, th ...

angularcsstypescriptangular-reactive-formsangular-forms

The uncertainty surrounding the usage of checkboxes in D3.js

I am faced with the challenge of adding checkboxes to multiple groups within an SVG, each containing a circle and text element. I have attempted to accomplish this by using D3 to append foreignObject tags and then add checkboxes to each group. The code I h ...

javascripthtmld3.js

Issues with video playback on Apple devices

When playing a video through the browser, I am using the following code: <video class="video"> <source src="video.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. </vid ...

htmlioshtml5-video

CSS for creating a menu with a smooth "roll down" effect on hover

I've been attempting to create a unique hover effect for my menu. The specific effect I'm aiming for can be seen on www.firstborn.com. It involves sliding down from the top in a non-uniform manner. Despite trying various CSS techniques and examin ...

javascriptjquerycss