Setting objects in parallel in HTML involves using the display property along with the value

Creating two sign-up forms using HTML and CSS Bootstrap. Want them to be parallel, tried using the position tag but there is unwanted space created between the forms. View the output How can I prevent this circle of space from being generated?

<main class="my-form">
    <div class="container">
        <div class="row justify-content-flex-start">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Apliko</div>
                    <div class="card-body">
                        <form name="my-form" onsubmit="return validform()" action="success.php" method="">
                            <div class="form-group row">
                                <label for="full_name" class="col-md-3 col-form-label text-md-right">Emri juaj:</label>
                                <div class="col-md-6">
                                    <input type="text" id="emri" class="form-control" name="emri">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="email_address" class="col-md-3 col-form-label text-md-right">Adresa Email:</label>
                                <div class="col-md-6">
                                    <input type="text" id="email_address" class="form-control" name="email-address">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="user_name" class="col-md-3 col-form-label text-md-right">Subjekti:</label>
                                <div class="col-md-6">
                                    <input type="text" id="subjekti" class="form-control" name="subjekti">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="phone_number" class="col-md-3 col-form-label text-md-right">Mesazhi:</label>
                                <div class="col-md-6">
                                    <input type="text" id="mesazhi" class="form-control">
                                </div>
                            </div>

                             <div class="form-group row">
                                <label for="phone_number" class="col-md-3 col-form-label text-md-right">CV-ja juaj:</label>
                                <div class="col-md-6">
                                    <input type="file">
                                </div>
                            </div>


                            <div class="col-md-6 offset-md-3">
                                <button type="button" class="btn btn-primary" onClick="myFunction(), location.href = 'index.html'">
                                Register
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

This was the first form. Started the second form like this.

<main style="position:sticky; left:680px; top:2px; width:900px;">
    <div class="container">
        <div class="row justify-content-flex-end">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Rregjistrohu si perdorues</div>
                    <div class="card-body">
                        <form name="my-form" onsubmit="return validform()" action="success.php" method="">
                            <div class="form-group row">
                                <label for="full_name" class="col-md-4 col-form-label text-md-right">Emer Mbiemer:</label>
                                <div class="col-md-6">
                                    <input type="text" id="full_name" class="form-control" name="full-name">
                                </div>
                            </div>
htmlcsstwitter-bootstrap

Answer №1

If you want to avoid using CSS boostrap, consider utilizing Flex properties to create two containers side by side

HTML

<div class="flexContainer">
    <div>INSERT YOUR FIRST CONTENT HERE</div>
    <div>INSERT YOUR SECOND CONTENT HERE</div>
</div>

CSS

.flexContainer{
    display: flex;
    flex-direction: row;   
}

.flexContainer div{
    flex-basis: 50%;
}

This approach will result in shorter code

Answer №2

Looks like the issue lies with manual width adjustments causing horizontal scrolling. Since you're utilizing the Bootstrap framework, it's best to leverage its built-in flexibility instead of defining manual widths. I've streamlined the code structure for you.

Check out the Simplified Form Structure - Snippet here

Hoping this resolves your problem!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css">
<main>
        <div class="bg-light py-3 mb-4">
            <div class="container">
                <h2>Heading</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla qui quisquam sit harum labore iusto cum, temporibus est soluta voluptatibus! Fugiat doloremque facere suscipit porro dolore odio harum vero at!</p>
            </div>        
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header">Profile</div>
                        <div class="card-body">
                            <form>
                                <div class="form-group row">
                                    <label for="full_name" class="col-md-3 col-form-label text-md-right">Name:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="emri" class="form-control" name="emri">
                                    </div>
                                </div>
            
                                <div class="form-group row">
                                    <label for="email_address" class="col-md-3 col-form-label text-md-right">Email ID:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="email_address" class="form-control" name="email-address">
                                    </div>
                                </div>
            
                                <div class="form-group row">
                                    <label for="user_name" class="col-md-3 col-form-label text-md-right">Subject:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="subjekti" class="form-control" name="subjekti">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="phone_number" class="col-md-3 col-form-label text-md-right">Address:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="mesazhi" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="phone_number" class="col-md-3 col-form-label text-md-right">Updated CV:</label>
                                    <div class="col-md-6">
                                        <input type="file">
                                    </div>
                                </div>
                                <div class="col-md-6 offset-md-3">
                                    <button type="button" class="btn btn-primary" onClick="myFunction(), location.href = 'index.html'">
                                        Register
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- col-md-6 -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">Profile</div>
                        <div class="card-body">
                            <form>
                                <div class="form-group row">
                                    <label for="full_name" class="col-md-3 col-form-label text-md-right">Name:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="emri" class="form-control" name="emri">
                                    </div>
                                </div>
            
                                <div class="form-group row">
                                    <label for="email_address" class="col-md-3 col-form-label text-md-right">Email ID:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="email_address" class="form-control" name="email-address">
                                    </div>
                                </div>
            
                                <div class="form-group row">
                                    <label for="user_name" class="col-md-3 col-form-label text-md-right">Subject:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="subjekti" class="form-control" name="subjekti">
                                    </div>
                                </div>
            
                                <div class="form-group row">
                                    <label for="phone_number" class="col-md-3 col-form-label text-md-right">Address:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="mesazhi" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="phone_number" class="col-md-3 col-form-label text-md-right">New Field-1:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="mesazhi" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="phone_number" class="col-md-3 col-form-label text-md-right">New Field-2:</label>
                                    <div class="col-md-6">
                                        <input type="text" id="mesazhi" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="phone_number" class="col-md-3 col-form-label text-md-right">Updated CV:</label>
                                    <div class="col-md-6">
                                        <input type="file">
                                    </div>
                                </div>
                                <div class="col-md-6 offset-md-3">
                                    <button type="button" class="btn btn-primary" onClick="myFunction(), location.href = 'index.html'">
                                       Sign Up
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- col-md-6 -->
            </div>
            <!-- row -->
        </div>
        <!-- container -->
    </main>

Answer №3

One efficient way to achieve this is by using the following code snippet:

section {
    max-width: 100%;
    overflow-x: hidden;
}

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

Switch the design and save it in the browser's cache

Exploring the possibility of having two themes, "dark" and "light," that toggle when a checkbox is clicked. To implement the theme change, I used the following JavaScript code: document.documentElement.setAttribute('data-theme', 'dark&apos ...

javascriptcsslocal-storage

The background colors are not extending to the full width of the screen

I am facing an issue in my CSS code while trying to create a footer. The background color is not filling the width of the screen, and I had encountered the same problem earlier. Here is how it looks: (https://i.sstatic.net/5VxYU.png) HTML Code: *{ ma ...

htmlcss

What is the best method for retrieving the entire row data based on the maximum value in a column?

function findMaxValue() { var highestValue = Math.max.apply(Math, $('.sira').map(function() { return $(this).text() })) alert(highestValue); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"& ...

javascriptjqueryhtml

Sass flex order has no effect on elements that are generated

I encountered an issue with the rendering of SVGs in my project. Currently, they are displayed correctly in desktop mode, but in mobile portrait mode, I need to change the order of one specific SVG element within the row. To achieve this, I decided to use ...

cssreactjssvgsassflexbox

The Express JS is having trouble serving the static CSS files through the router

Currently, I am encountering this issue in a larger project, so I have created a simplified version to explain it more clearly. The Tree Structure of my project is outlined below: demo |____admin | |____admin.js |____node_modules | |____static | ...

cssnode.jsexpressroutes

What causes certain CSS properties to scroll while others remain fixed?

I am experiencing a strange issue with my table. I am utilizing the tableHeadFixer jQuery plugin to create a fixed header with a scrollable table body. In my CSS, I have a class called table which is defined as follows: .table thead { color: blue; ...

jqueryhtmlcsstwitter-bootstrap

When is the appropriate time to nest CSS class selectors within other class selector definitions?

REVISED 1 After receiving feedback, I made the following changes: .lower-container { justify-content: center; position: absolute; width: 92vw; // height: 46vh; <--- no set height /* nested classes for adjusting position and height of low ...

css

The execution of jQuery code from PHP using $.ajax is not functioning properly

I am attempting to run a jQuery code from a PHP page using AJAX. Modify the HTML of div.error Here is the code (Let me know if there is a simpler method): - no $.load HTML/jQuery: jquery.js already loaded <input type='text' id='test&a ...

phpjqueryhtml

Is it advisable to use type="text/plain" for JavaScript?

I recently came across instructions on how to implement a particular feature out of curiosity. I found it interesting but was puzzled when they mentioned that in order for it to function properly, certain steps needed to be followed: You must identify any ...

javascripthtml

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

javascriptjqueryhtmlajax

Hover over to disable inline styling and restore default appearance

There are some unique elements (.worker) with inline styles that are dynamically generated through Perl. I want to change the background when hovering over them and then revert back to the original Perl-generated style. The only way to override the inline ...

javascriptjqueryhtmlcssperl

The unique design of the list extends beyond the boundary line

In my current project, I am utilizing next.js and MUI (material-ui). The component I am working with has the following structure: <Paper> <List> .. </List> </Paper> One issue I am facing is that when the list is scrolled, the ...

cssreactjsmaterial-ui

Display the importance of utilizing Bootstrap 4's range input feature

Is there a way to display the value of a range input in Bootstrap without using Javascript? I found this tutorial but it doesn't show how to do it: https://getbootstrap.com/docs/4.1/components/forms/#range-inputs <div class="container"> < ...

htmlcssbootstrap-4range

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

javascripthtmlcsstwitter-bootstrapz-index

<div><!-- including: unknown --></div>

Need some assistance with this issue. The ng-include path I am using is "http://localhost:8080/coffeeprojects/calc.html". I tested the path and it seems to be working. However, despite organizing the files and improving the path as suggested in some resp ...

javascriptjqueryhtmlangularjscoffeescript

Styling certain UL and LI elements with CSS properties

Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...

htmlcsscss-selectors

Retrieving information from the table based on the user currently logged in

I have a scenario with two different tables, NGO and Volunteer. When a volunteer selects an NGO to work with, I want to display only those volunteers who are interested in the current logged-in NGO. Below is the code snippet I am using: [<?php ...

phphtmlcssmysqlmaterialize

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

javascriptcssreactjsmaterial-ui

How can I generate a box shadow design that is distinct from the original element?

Is there a way to make the box shadow on a checkbox input appear as a circle when hovered over, rather than taking the shape of the element itself? How can I achieve this effect? <input type="checkbox" class="check"> <label f ...

htmlcss

Modify the state of each individual button

I recently came across a cool implementation using clicks and jQuery fade effects to show a div when a button is clicked and then change the state of the button. Check it out here: http://jsfiddle.net/ttj9J/5/ HTML <a class="link" href="#" data-rel="c ...

jqueryhtmlcss