How do I make my sections align like the output picture?

I am struggling to find out how to make this works since using "fieldset" is something very fresh to me. Thank you

enter image description here

fieldset.Content {
   height: 100px;
   width: 200px;
   margin-left: 70%;
}

label.extra {
   margin: auto;
}

      <label >Rate this photo </br>
      <input type="number" min="1" max="10" name="rate" ></br>

      <label >Color Collection: </br>
      <input type="color" name="color" />

      <fieldset >
         <label>Date Taken: </label>
         <input type="date" name="date"></br>
         <label>Time Taken: </label></br>
         <input type="time" name="time">
      </fieldset>
      <input type="submit" />
      

   </fieldset>

CodePudding user response：

As per previous suggestion, here they are aligned using flexbox. For more info check out css-trick's Complete Guide to Flexbox.

.photo-info-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-content: flex-start;
  max-width: 700px;
  margin: 0 auto;
}
.date-taken {
  /* height: 100px; */
  width: 200px;
  /* margin-left: 70%; */
}
.extra {
  margin: auto;
}
.submit-buttons {
  margin-top: 1em;
  text-align: center;
}

<fieldset >
    <div>
        <label >Rate this photo </br>
        <input type="number" min="1" max="10" name="rate" ></br>

        <label >Color Collection: </br>
        <input type="color" name="color" />
    </div>

    <fieldset >
       <label>Date Taken: </label>
       <input type="date" name="date"></br>
       <label>Time Taken: </label></br>
       <input type="time" name="time">
    </fieldset>
</fieldset>
<div >
    <input type="submit" />
</div>

CodePudding user response：

Put Your Upper Contents in a div and your fieldset content in a div. then give flex to their parent container. you can check css-tricks flexbox tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

You can do this by flex and also your label tags are not properly closed.please check below

fieldset.Content {
  height: 100px;
  width: 200px;
}

label.extra {
  margin: auto;
}

.main {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 0 auto;
  width: 50%;
}

.submit {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

<div >
  <div >
    <label >Rate this photo </br>
  <input type="number" min="1" max="10" name="rate" ></br></label>
    <label >Color Collection: </br>
      <input type="color" name="color" /></label></div>
  <fieldset >
    <label>Date Taken: </label>
    <input type="date" name="date"></br>
    <label>Time Taken: </label></br>
    <input type="time" name="time">
  </fieldset>
</div>
<div > <input type="submit" /></div>

CodePudding user response：

The existing answers with flexbox address the primary problem, but you really should avoid <br> tags for layout purposes, they are semantically meaningless and difficult to style. There are many options. The simplest of which is setting label and input to display:block. Now you can use media queries if you wanted to display them on one line on wide screens. Still doable with br but it's a lot more hacky.

Always make sure to close tags that aren't self-closing and if not wrapping the field with a label use id on the element and for on the label.

/*Flex for our 2 components*/

.form-container {
  display: flex;
  justify-content: space-around;
}

/*Set label and inputs to block to display on seperate lines*/
.form-container input,
.form-container label {
  display: block;
}

/*Your existing style*/
fieldset.Content {
  height: 100px;
  width: 200px;
}

/*Center the submit button*/
[type=submit] {
  margin: 5px auto;
  display: block;
}

<div >
  <div >
    <label  for="rate">Rate this photo </label>
    <input type="number" id="rate" min="1" max="10" name="rate">

    <label >Color Collection: </label>
    <input type="color" id="color" name="color" />
  </div>

  <fieldset >
    <label for="date">Date Taken: </label>
    <input type="date" name="date" id="date">
    <label for="time">Time Taken: </label>
    <input type="time" id="time" name="time">
  </fieldset>
</div>
<input type="submit" />