Kevin Powell - Community•2d ago

positioning a form - html/css only

Hey guys , im trying to position a form like in this picture this is my code so far : https://codepen.io/MightyFriesByte/pen/KwdoLOj PLEASE! don't give me a solution just try to help me to get into the solution :)(

CodePen

demo

...

20 Replies

Ganesh•2d ago

You want to place the form and the paragraph side by side horizontally so you need to do something so they aren't rendering on new lines Look into flex And how you can position two elements horizontally with it

NugByteOP•2d ago

i thought maybe i can do that with POSITION but im trying to come up with FLEX , what i have in mind is to put the email input in seperate div and also the P

Ganesh•2d ago

How does a flex container layout it's children normally? It's horizontal right So you need to make the form and paragraph children somehow

NugByteOP•2d ago

    <div class="form-group">
      <h1>Contact Form</h1>
      <div class="input-box">
        <input type="text" placeholder="First name" />
        <input type="text" placeholder="Last name" />
        <input class="email" type="email" / placeholder="Email">
      </div>
      <button>Click Me!</button>
      <div class="para">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque amet,
          quisquam reiciendis voluptatibus aut at asperiores eos natus soluta
          sapiente ex minus. Consequatur perspiciatis in excepturi itaque modi
          tempore, reprehenderit aliquid libero nostrum numquam ad nesciunt
          officia temporibus. Doloribus similique minus odio eos illum enim
          corporis, assumenda tenetur? Totam dolores mollitia nulla accusantium,
          laboriosam facere. Ullam ipsa doloribus exercitationem, magni,
          blanditiis cumque dolore ut excepturi, repudiandae qui praesentium
          eaque amet.
        </p>
      </div>
    </div>

    <div class="form-group">
      <h1>Contact Form</h1>
      <div class="input-box">
        <input type="text" placeholder="First name" />
        <input type="text" placeholder="Last name" />
        <input class="email" type="email" / placeholder="Email">
      </div>
      <button>Click Me!</button>
      <div class="para">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque amet,
          quisquam reiciendis voluptatibus aut at asperiores eos natus soluta
          sapiente ex minus. Consequatur perspiciatis in excepturi itaque modi
          tempore, reprehenderit aliquid libero nostrum numquam ad nesciunt
          officia temporibus. Doloribus similique minus odio eos illum enim
          corporis, assumenda tenetur? Totam dolores mollitia nulla accusantium,
          laboriosam facere. Ullam ipsa doloribus exercitationem, magni,
          blanditiis cumque dolore ut excepturi, repudiandae qui praesentium
          eaque amet.
        </p>
      </div>
    </div>

Ganesh•2d ago

First thing look at the flex direction you've set on form group Second actually use a form element please Also form group has multiple direct children instead of just the form and the paragraph You need to have a flex container with only the form content and paragraph as children

NugByteOP•2d ago

it doesnt make sense and i tell you why the order is like that h1 inputs buton p

Ganesh•2d ago

What doesn't make sense

NugByteOP•2d ago

that one

Ganesh•2d ago

Ok but what does changing order do

NugByteOP•2d ago

the browser reads top to bottom

Ganesh•2d ago

You need to layout the form content on top of each other. The input should be above button and the whole form containing the input and button should be on the left of para Why does this matter It doesn't matter for layout You gotta create containers for layout. Layout is css thing and while html order can affect the possible ways to stack stuff this isn't relevant in what I'm telling you to do

NugByteOP•2d ago

ok so should i stack the form and button in child div of the form-group ?

Ganesh•2d ago

<Form and paragraph container>
<form>
<The inputs>
<The button>
</form>

<the paragraph>

</Form and paragraph container>

<Form and paragraph container>
<form>
<The inputs>
<The button>
</form>

<the paragraph>

</Form and paragraph container>

Something like this The form and paragraph container should be flex container Also what exactly are you doing here. Where is this exercise from

NugByteOP•2d ago

can i ask u something bro ?

Ganesh•2d ago

You can but i might not answer

NugByteOP•2d ago

this form also has h1 in top , should i not put a container of the h1 and the form and then the p in seperate element ?

Ganesh•2d ago

If you keep the h1 inside the form and paragraph container what do you think will happen Do you want the h1 horizontally stacked? Or do you want it on top of form and paragraph Think about it Or maybe just try it out and see the result

NugByteOP•2d ago

i see that it goes when ever the form goes so its not efficient it all i think i should put the email input in seperate div cause first name and last name should be above and the email in bottom

Ganesh•2d ago

Try it out

NugByteOP•2d ago

ok OMG it doesn't go down 🙁 finished

Gaming

Programming

positioning a form - html/css only

Did you find this page helpful?