What is the best way to align the inner content to the left and right within a border-radius shape?

.intro h1{
    font-family: 'Cambria';
    font-size: 16pt;
    font: bold;
    text-align: left;
}

.intro p{ 

    font-family: 'Calibri';  
    font:italic;
    font-size: 12pt; 
    padding: 0px 690px 0px 20px;
    text-align: left;

}
.content{ 
    border: 2px solid; 
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px; 
}
#para1{
    padding: 0px 1050px 0px 20px; 
    
}
#para2{
    padding: 0px 1099px 0px 20px;
}

.username-label, .username-textbox, .password-label, .password-textbox {
   text-align:right; 
}
<html>

    <head>
        <link href="~/Styles/Home.css" rel="stylesheet" />
        <title>Final Project</title>
    </head>

    <body>
        <script src="~/Scripts/jquery-2.1.1.min.js"></script>
        <script src="~/Scripts/jquery-ui.min.js"></script>
        <script src="~/Scripts/Home.js"></script>
        
        <div class="intro">

          <h1>Welcome to Cuyahoga Community College Student Services Online</h1>
            <p>Cuyahoga Community College recognizes students' rights to access personal and academic records
              in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
        </div>
        <div class="content">
        <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
         <div class="username-label">Username: </div>
            <div class="username-textbox">
                <input class="existing username-input-textbox" type="text" value="" />
            </div>
       
            <div class="password-label">Password:</div>
            <div class="password-textbox">
                <input class="existing password-input-textbox" type="text" value="" />
            </div>
            <button id="button1">Log in</button>
            <hr />

            <p id="para2">New Users, please create a new account by providing us with some basic information.</p>
            <div class="Username-label1">Username: </div>
            <div class="username-textbox1">
                <input class="username-new-input-textbox" type="text" value="" />
            </div>
            <div class="Password-label2">Password:</div>
            <div class="password-textbox2">
                <input class="password-new-input-textbox" type="text" value="" />
            </div>
            <div class="Email-label3">Email:</div>
            <div class="email-textbox3">
                <input class="email-new-input-textbox" type="text" value="" />
            </div>
            <div class="Repeat-Email-label4">Repeat Email Address:</div>
            <div class="repeat-email-textbox4">
                <input class="reenter-new-input-textbox" type="text" value="" />
            </div>
            <button id="button2">Create Account</button>

        </div>

        <footer>Cuyahoga Community College</footer>
        <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
    </body>

</html>

I'm currently developing a web project that includes a login screen for Tri-C students where they can enter their username and password if they already have an account or create a new one if they don't. I haven't added any functionality to the buttons yet, but I'm having trouble positioning the labels and textboxes to the right side. While the text-align property aligns them to the right, it doesn't achieve the desired layout shown in the picture. Here's my code so far along with the image of what I'm aiming for.

Check out the desired outcome here

Answer №1

Add two brand new div components within the main content div, one positioned to the left and the other to the right. Then apply the styles display: table-cell; and width: 50%. That should solve the issue at hand.

View an example on this link.

Update: Don't forget to remove that excessive padding!

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

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

How numerous data attributes are available within Bootstrap? What functions do they perform and what possible values can be assigned to them?

Lately, I've been exploring the world of data attributes in Bootstrap such as data-toggle, data-trigger, and data-ride. However, my search for a comprehensive list of these attributes has come up short. I'm curious about the potential values tha ...

Mastering the art of incorporating background image transitions and creating a seamless slider for navigation

Is there a way to create a navigation menu like the one on this theme? On this theme, when you hover over a menu item, the background image smoothly moves left or right to the item you are hovering on. If anyone knows of plugins that can achieve this eff ...

Is there a way in JavaScript to prevent the enter key from triggering a mouse click event?

I am facing an issue with my program where I have multiple clickable buttons and the ability to submit by pressing the enter key. However, when I click several buttons with the mouse and then press enter, it not only submits the form but also acts as if ...

managing the speed at which animated gifs are loaded and played

I am facing a challenge with a slideshow that features multiple animated gifs. Each slide is equipped with its own animated gif. My goal is to ensure that the animated gifs play in synchronization with the timeline I have set up in photoshop, starting fro ...

Changing the size of a background image is proving to be quite a challenge for me

I'm completely new to HTML and CSS. I've been working through a book titled The Missing Manual, CSS3 but I've hit a roadblock when it comes to changing the size of an image that I want to use as a background. In order to troubleshoot the iss ...

Functionality fails to load correctly post completion of AJAX request

After successfully implementing an API call to OS Maps (UK map builder) as per their documentation, I encountered a problem when trying to display a map based on a custom field name using ACF (Advanced Custom Fields) in WordPress. The issue arises because ...

Disabling animations in Reactjs with CSSTransition and Group Transition

Currently, I am experimenting with REACTJS to build a basic app featuring Transitions. In my project file, I have imported CSSTransitions and Group Transition. However, when attempting to implement CSSTransition for specific news items, the animations are ...

Having trouble with the open and create new post button not functioning properly

The submit post button, user name, and logout button are not functioning properly. Can anyone assist with this issue? F12 and jsintrc are not providing any useful information. Below is the HTML code for the create new post button which should direct to a ...

What causes the vertical movement of my Bootstrap v5 card when resizing the window?

Issue: While working on my website and implementing three cards using Bootstrap, I encountered a problem. When I resize the window vertically, all the elements shift upwards and overlap with other elements, ruining the look of the site. I suspect the issu ...

Twitter-Bootstrap: implementing text underlines for thumbnail captions

While experimenting with Bootstrap, I aimed to create a layout similar to ; a grid featuring bordered panels containing text and images. After some research, I concluded that Bootstrap's Thumbnail component would be the most suitable choice for my pro ...

Ways to ensure your page stays confidential

Concept: Exploring the idea of making specific pages on a website private. For example, having 4 navigation links where one link leads to a private page that requires a username and password for access. Currently, my practice website has 7 links directing ...

What is the method for adding a before pseudo-element to my button element?

HTML & CSS Issue <button>Get Postion</button> Below is the CSS code for styling a button: button { padding: 1rem; background-color: red; color: wheat; border: 4px solid yellowgreen; position: relative; cursor: pointer; ...

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...

Alerting Users Before Navigating Away from an Angular Page

I am looking to implement a feature in my app that will display a warning message when attempting to close the tab, exit the page, or reload it. However, I am facing an issue where the warning message is displayed but the page still exits before I can resp ...

Encountered a problem loading resources - code 500 malfunction detected

I am encountering an issue where I consistently receive a 500 Internal Server Error message in the developer console for all CSS, image, and JS files: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Despite doub ...

What is the best way to create a div that horizontally scrolls and contains multiple other div elements?

I've set up a div that contains other divs, including images and text. My goal is to make the main div scrollable horizontally while aligning the inner divs using inline-block. However, when I apply: overflow-x: scroll; The main div ends up with tw ...

Navigating through the sticky top navbar in Bootstrap 4 by swiping

I've encountered an issue with a sticky-top navbar that has dropdowns with multiple buttons each. On smaller devices, the navbar gets cropped and I'm unable to access the lower buttons. I'm looking for a solution to add scrolling to this nav ...

Unable to eliminate a persistent purple dashed section within the div

After gaining some knowledge of CSS and flexbox, I decided to create a Landing brochure site. However, I encountered an issue that I couldn't solve on my own during the building process. I'm attempting to eliminate the Purple dashed area by exten ...

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...