Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Changing position of sign in and sign up form

sallu110

Coder
Hye! I want the sign up and sign in form to be place horizontally in the middle of the page . Currently they are placed on top of each other.
1620136765894.png
[CODE title="Code"]
</section>
<div class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign In</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Email</label>
<input type="text" id="full-name" name="full-name" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Password</label>

<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focus:eek:utline-none hover:bg-indigo-600 rounded text-lg">Sign in</button>
</div>
<br>
<div class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Full Name</label>
<input type="text" id="full-name" name="full-name" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="text" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">

<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Password</label>

<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focus:eek:utline-none hover:bg-indigo-600 rounded text-lg">Sign up</button>

</div>
</div>
[/CODE]
Thanks!
 
Its quite easy actually all you need to do is use display:flex; CSS property on the parent of both the div elements and it will make them inline there is a lot more properties that are used along with flex to position the div in the ways you want and these can be made responsive as well.
However, if you ever had a need to make a to make responsive website with only CSS use display:grid; property this too has several other properties that work with them.

Learn more about basics of HTML and CSS from here.
Learn more about flex and grid from W3School or Mozilla Docs both are good though Mozilla docs is not for the beginner.
 
Last edited by a moderator:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom