Trouble aligning two columns with Survey Form project

HTML-CSS
1

I’m trying to figure out how to align the label and the input for the Survey Form project in basically two columns. They will continue downward with each new label/input. I’m trying to get my project to look similar to the linked project that the project gives us. I’m trying to now use an inline-block method to do this. I set all my inputs/options under a div class called “inputs” and my labels all have a class “labels”. But when I use CSS to try to make each of these classes an inline-block and make them columns, i’m having no luck. I cant figure out how to do it. I was trying to use a grid-template-area approach at first but I couldn’t figure out that either, this seemed like an easier method. I am unable to post links right now because i’m so new on these forums, but my current code is on my codepen account (same username as here) Any help here would be greatly appreciated, thank you!

2

You can get some of the way using this. You have to fix the class name for the #role label (it has a class of label but should be labels)

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.labels {
  grid-column: 1;
  justify-self: end;
}

.inputs {
  grid-column: 2;
  justify-self: start;
}

/* Center the description */
#description {
    grid-column: 1 / -1;
}

Then you still need to fix the radio buttons and checkboxes. Also, the grid will make the submit button take up the full with of one of the columns. See if you can figure it out.

Maybe have a look at some grid tutorials. Otherwise, come back and ask if you have any questions.

Edit: I should probably have posted your Codepen link for you.
https://codepen.io/jchmbrs/pen/axKRWj

1 Like
3

Cool, I understand how you fixed it, thanks for the help! I’ve been messing around with the radio inputs, trying to get them aligned as well, but i’m having trouble. I am able to align the actual radio buttons by using float: left; in CSS, but the text next to the buttons doesn’t align with the buttons? I’ve tried text-align in CSS but that doesn’t work. I’ve looked online but haven’t found any solutions that help me. Any suggestions on this?

4

I would just use CSS grid for all of it. Why not, get some practice with it.

  1. Give the radio inputs some labels and nest them inside. Also, add an extra class to the container (I have given it the input-group class).
<div class="inputs input-group">
  <label for="yes">
    <input id="yes" type="radio" name="recommend">Definitely
  </label>
  <label for="maybe">
    <input id="maybe" type="radio" name="recommend">Maybe
  </label>
  <label for="no">
    <input id="no" type="radio" name="recommend">No
  </label>
</div>
  1. Make the new .input-group class a grid container. Give it one column and justify the items to the start.
.input-group {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
}

  1. Use this same pattern for the checkboxes, give them labels, nest the inputs, and add the same input-group class to the container.

  2. Remove the two input selectors with the floats (you don’t need them now).

1 Like
5

Ok so I tried using the code you gave me here and no change is made? This code makes sense to me, idk why its not working?

6

Looks like it works to me, maybe try refreshing the page again. You can also try clearing the cache.

1 Like
7

Yeap that did it, thanks!

8

No problem, if you have more question feel free to ask.

9

I actually do, its on a new project i’m working on. I’m trying to align an image and text to the left of the header. But I want the image and text to be to the left and center of the header, not just the top left. I tried setting there divs to inline-block and vertical-align them but that didn’t work. Not sure where else to turn with it, any suggestions? The pen is on my profile at codepen and its called Product Landing Page (trying to align the noah cline banjos text and image)

10

Actually think I got it, i set the div to position: fixed and set top: 0 and left: 0; that seemed to have worked