Div not working correctly

Hello,

I am working on my survey form and right now I am trying to get my top radio buttons (under the h3 “do you like pants”) in their own line. I have them in their own div but they are sharing a line with the name label and I am unsure why. I searched online but I keep getting articles and tutorials on how to make multiple divs share a line. That’s not what I want.

How do I fix this problem?

Here is my codepen

My html and css aren’t anywhere close to done but I need help with this one problem before I can move forward.

Thank you so much in advance!

removing float: left from #likepants does it, it also places it above the name label on middle of the screen.

Hello Jordan,

Welcome to the forum :grinning: I checked your pen, and before anything else, I ran the HTML validator of CodePen. I found errors and one of them is that there’s only a label end tag at line 82. I observed that your code is hard to read as labels are disorganized and kind of messed up. I tried to arrange them for you so your code would be better off this way:

  <label for="parents">
    <input id="parents" type="radio" name="learning-pants" value="parents">from parents
  </label>
  <label for="school">
    <input id="school" type="radio" name="learning-pants" value="school">at school
  </label> 
  <label for="who">
    <input id="who" type="radio" name="learning-pants" value="who">what are pants
  </label>

Another part of your code that could be structured better is at lines 38-51. I modified them for you so can better understand what I’m trying to point out here.

<label id="name-label">NAME
  <input type="text" required id="name" placeholder="name">
</label>
<label id="email-label">EMAIL
  <input type="email" required id="email" placeholder="email">
</label>
<label id="number-label">PANTS
  <input type="number" required id="number" placeholder="number of pants owned" min="35" max="200">
</label>

I hope you would rightly use indentation next time so readers (including yourself) can read your code easier. For the other error, you can remove !doctype at the top of HTML.

I observed that you’re using a lot of divs as containers for sections of content. It is not a good practice because divs are mainly used for styling purposes. Please try to use the element tags as much as possible to contain blocks of content.

For instance, you’re containing the form inside a div that has an id of “form”. Then you styled both the form tag and the div in your CSS. Div is not necessary here because the form tag itself is the container for the form’s content. You can target the whole form in your CSS by just using the form as your selector.

The same thing applies to your code about labels that I’ve mentioned earlier. Instead of div, you can contain them in fieldset tags. For instance, the div at HTML line 37, <div class=info> you can change it to <fieldset> so your code will be like this now:

<fieldset>
  <label id="name-label">NAME
    <input type="text" required id="name" placeholder="name">
  </label>
  <label id="email-label">EMAIL
    <input type="email" required id="email" placeholder="email">
  </label>
  <label id="number-label">PANTS
    <input type="number" required id="number" placeholder="number of pants owned" min="35" max="200">
  </label>
</fieldset>

You can style this block of form content by using fieldset as your selector in CSS instead of the class info. You can also apply this lesson by removing the div containing the whole content of the page. Target the <body> as it is the tag that should contain the web page’s content like header, sections, paragraphs, and form.

So you should also put <h1>Welcome</h1> and the <p class = "description">...</p> inside the body, not in the head. You could create a header element, <header></header> and put the two tags inside to kind of separate it from the from (as you also want to style it differently like a white background).

Your HTML structure should look like this:

<html>
  <head>This should only contain meta data (like title). This is not visible unlike the content inside the body</head>
  <body>
    <header>
      <h1>Welcome</h1>
      <p  class="description">Intro text</p>
    </header>
    <form>
      <fieldset>
        <label>
          <input>
        </label>
      </fieldset>
    </form>
    <footer></footer>
  </body>
</html>

When styling the header to have a white bg; the form to have a light green bg, and the body to have a dark green bg, I advise you to create a div to contain the header and the form. This is the right time to use a div because what you’re trying to do is just style them.

You might have noticed that I removed the multiple line breaks or br. I believe a better, more efficient, and more effective way to add spacing is by adjusting the elements’ margin. Target the labels then add top and bottom margins. For example in CSS the code will be:

label {
    margin: 0.5rem 0;
}

This way every label like the NAME, EMAIL, and PANTS will be separated by 0.5rem from each other. Or there’s a 0.5 rem spacing between them on their top and bottom sides.

If you’re going to follow the right structure I created earlier, the first fieldset that contains the question “Do you like pants” and the choices for it, will be separated from the second fieldset which is all about asking the user’s name, email, and pants :laughing: ALso, you might run into another problem of the labels sitting next to each other. It is because they are inline elements. What kind of display property do you think will let the labels be separated from each other or will let each of them be in their own line?

Thank you for your response. I originally had my html/css that way, without the float, and am trying to change it so the radio buttons are on the left of the screen and in their own line. I should have added that to my post :grimacing:

Thank you for all of the feedback! I definitely need to get used to writing so other people can read my work more easily. I am a baby when it comes to all of these things, so any help is much appreciated. I tried adapting my html to use fieldset and it left my page with a grey box around it and the labels were on the right side of the screen and not above the input bars. I am going to keep chipping away, I know I will sort it our eventually.
If you have anymore suggestions my ears are open.
Thank you again!

It is because the fieldset has default styles. Some elements have them. The headings, for example, have default margins. You can find out other default CSS values of HTML elements at W3Schools.

Another thing I noticed that you should avoid doing is that you’re targeting almost all of your HTML elements by their id. Id selectors have the highest specificity so any styles you have for them can overwrite the type and class selectors. What if you ran into a problem that your new added styles aren’t applying or taking into effect? The probable cause could be is that before (or even after) your new added styles, there’s an id selector that you’ve set some styles for it. I suggest reading about “calculating specificity” and “combining selectors” at Shay Howe’s free quality open resource.

I have another observation in your CSS code that could be improved. Below is your code for styling the labels, NAME, EMAIL, and PANTS and their input. Yes, they’ll work, and the styles will take into effect, but there’s a more efficient way to do it.

#name {
	width: 400px;
}
#name-label {
	margin-right: 350px;
}
#email {
	width: 400px;
}
#email-label { 
	 margin-right: 350px; 
}
#number {
	width: 400px;
}
#number-label {
	margin-right: 350px;
}

You can combine the id selectors like this:

#name, #email, #number {
  width: 400px;
}

#name-label, #email-label, #number-label {
  margin-right: 350px;
}

But if you took my advice and read about specificity, you will not target them by their id. Instead, you’ll be using the type selectors.

Avoid making your CSS code long, you would have a hard time going around it. And practicing minimizing your code will make you efficient.

Based on your code above, I assume you set those width and margin values because you want the labels and input boxes to have their own line. You can use percentages instead of px to be responsive. Doing it can also save you from using math. So, what percent can you apply to the input boxes so that they’ll fully occupy the remaining space to their right side making the labels not sit next to them?

I suggest reading about absolute and relative lengths as well as max-width and max-height. The course after all is “Responsive Web Design”. The main goal is to learn how to make your page have a fluid or flexible design. A design that transforms from one screen along with different screen sizes, from mobile to huge desktop screens.

Your form has a horizontal scroll bar indicating its unresponsiveness. I advise you to also learn well about media queries. I talked about it in another discussion here in the forum.

For my last suggestion, going through the FCC’s new Responsive Web Design Beta Course will be a huge help. You’ll be building mini-projects as you go through each lesson so you can learn a lot much better about the new ways to layout pages like Grid and Flexbox. You can read more about the course here. Grid and Flexbox are so much better than using floats in customizing layouts as they’re really dedicated to that purpose. The use of float is mainly for wrapping text or inline elements around pictures. Studying it is still helpful tho. I learned some others saying that one-way learning float comes in handy is in the case of going into old projects and updating them to conform to the new ways of customizing layout.