Having trouble aligning two contact forms side by side in the center

I've been researching CSS techniques for hours, experimenting with different methods to align them horizontally, but I'm struggling to achieve the desired result.

Currently, I am delving into the world of UI/UX design and finding inspiration on Codepen.

The challenge I'm facing is getting these two forms to display inline with each other.

Any assistance or guidance would be greatly appreciated.

I have created a fiddle which showcases the contact form accurately but not the other component, which is a map.

For reference, here is the working map UI on Codepen.

If you prefer, you can also use the following code snippet:

...
javascripthtmlcss

Answer №1

If you're looking to align elements side by side, one approach is to utilize an HTML table:

<table>
    <tr>
        <td>
            <form>
            ...
            </form>
        </td>
        <td>
            <form>
            ...
            </form>
        </td>
    </tr>

</table>

This method can help achieve inline elements. While there are CSS solutions available as well, using tables remains a reliable option.

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 are the steps for adding a photo to the folder directory on my hosting server?

Hey there! I've been having some trouble uploading a photo from my website to the hosting server's directory (/public_html/upload/) using php. No matter what I try, the folder remains empty. I'm stuck and not sure where I'm going wrong. ...

phpjqueryhtmlfile-uploadimage-uploading

Use jQuery to remove an ID from an element using AJAX to interact with a database, then update

Hello, I am currently using jQuery to retrieve ids of multiple fields with ajax and send the data to be deleted via php. Despite being able to delete one item successfully, I am struggling to remove other ids. For example: Within a for loop that retrieves ...

phpjqueryhtmlajax

Discovering the minimum and maximum within an array containing objects

I am working with an array of objects that contain latitude and longitude points: var pts = [ { "X": 52.67528921580262, "Y": 8.373513221740723 }, { "X": 52.6759657545252, "Y": 8.374114036560059 }, { "X": 52.682574466310314, "Y": 8.372569084 ...

javascriptarraysobjectmaxmin

Create a multidimensional array from an array of objects

I am trying to organize my data by creating an array and listing each material based on its status. Here is the structure of my current array: let data = [ { Name: 'House 1', Details:[ {Materials: ...

javascriptarraysvue.jsobject

Is TinyMCE creating unexpected <g> tags?

When I save content in the TinyMCE WYSIWYG editor, I notice that the HTML tag below keeps appearing throughout the text: <g class="gr_ gr_283 gr-alert gr_spell gr_run_anim gr_inline_cards ContextualSpelling ins-del multiReplace" id="283" data-gr-id="28 ...

javascriptjqueryhtmltinymcewysiwyg

Designing a webpage using CSS

the design I'm aiming for I am attempting to create a header layout as depicted in the image below using HTML and CSS. I have managed to place the logo in the center, but I am facing difficulties in aligning the business list to the corner. I have tri ...

htmlcsslayoutheader

Form Style Components

I am currently using a form that contains material-ui components. Instead of relying on inline styles for the width property, I want to use css-in-js instead. I have previous experience with styled-components but there seems to be no form element available ...

javascriptcssreactjstypescriptstyled-components

Is the Javascript file successfully loaded?

Is there a way to verify if all 8 javascript files are loaded in an html document and handle any errors that may occur if one of the files fails to load, across various browsers? Thank you for your help! ...

javascript

The PUT request is experiencing a timeout issue

After struggling with updating a file in my Mongo DB through a form using a PUT request and Mongoose findByIdAndUpdate, I managed to make it work. The only issue now is that the PUT request seems to be stuck in an infinite loop, leading to a timeout error. ...

javascriptnode.jsexpressput

Utilizing and interpreting the input data provided by the user in jQuery

While following the tutorial at , I am trying to extract specific parameters from the user input to generate a corresponding URL. Below is the code snippet I am working with: <html> <head> <title>USGS Earthquake Feed</title> ...

javascriptjquerytableau-api

How can you use JQuery to create a fading effect on colors while keeping the boxes stationary?

I have designed a grid of 16x16 boxes. When you hover your mouse over a box, it turns pink. However, I want the box to remain visible when you move away from it, with the pink color gradually fading back to the original gray after a second. Here is the HT ...

javascriptjqueryhtmlcss

What is the reason behind watches not triggering when there are changes in history?

<script setup> import InputChat from '../components/InputChat.vue' import Chat from '../components/Chat.vue' import Layout from "@/components/Layout.vue"; import Sidebar from "@/components/Sidebar.vue"; import ...

javascriptvue.jswatch

Guide to verifying the update of user information with sweet Alert on ASP MVC

I'm currently working on an ASP MVC web application that involves using stored procedures with SQL Server. My goal is to implement a confirmation alert (Sweet Alert) to confirm the data update for a logged-in user. The code for editing works fine wi ...

javascriptc#ajaxasp.net-mvcstored-procedures

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

javascripthtmljquerycsssass

Parsing Problem---Is there a Parsing Error?

My code includes a function that calculates the total of cells and then displays it in a textbox: function UpdateTotal() { var total = parseFloat('0.0'); $("#<%= gvParts.ClientID %>").find("tr").not(".tblResultsHeader").each(funct ...

javascriptjqueryasp.netparsingparsefloat

Output the initial value and subsequently disregard any values emitted during a specified time interval

Check out my code snippet: app.component.ts notifier$ = new BehaviorSubject<any>({}); notify() { this.notifier$.next({}); } app.component.html <div (scroll)="notify()"></div> <child-component [inp]="notifier$ | async" /> ...

javascriptangularrxjsobservable

Implementing dynamic component rendering in Vue JS based on dropdown selection

I'm a beginner with Vue JS and I have a specific task in mind. Task Description : I need to create a dropdown with the following values. https://i.sstatic.net/Nllw7.png Upon selecting each value, a specific dropdown component should be added to th ...

javascriptvue.jsvuejs2vue-component

What is the correct way to update a value in React context?

In my current setup, I have the ColorContext declared as follows: const ColorContext = React.createContext("") I am attempting to create a basic function that can alter the context value, which will be utilized as a global state variable in various other ...

javascriptreactjsreact-hooks

Sending data using Ajax to the server-side code in ASP.NET

Struggling to successfully pass a series of values through Ajax to a code-behind method in order to insert the data into a database table. However, encountering issues where string variables are being received as empty strings and int variables as 0. The ...

javascriptc#jqueryasp.netajax

The Google map shifts beyond the perceived limits of the world

Is anyone else encountering an issue with Google Maps where you can now pan beyond the poles? It used to stop at the poles before, correct? The website I'm currently working on runs a location-based query on our server every time a user pans or zooms ...

javascriptgoogle-maps