How can I change the position of an
element?

Question

I just started in web dev and my first project is a resume website. I am trying to separate the education and experience sections with an hr element. It was working, then I used the float property in CSS to align education descriptions to the left and corresponding dates to the right. Now, the line that came after the education section is in the wrong area. Here is some code:

    <section>
        <h2>EDUCATION</h2>
        <p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
        <p id='e2'><strong>June 2021 - May 2022</strong></p>
        <p id='e1'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
    </section>
    <hr>
    <section>
        <h2>EXPERIENCE</h2>

The id e1 just floats left, and the id e2 floats right. How can I get the hr element to actually appear between the two sections, instead of in the middle of the education section?

You need a clearfix for this. Instead of `float` you should look up `flexbox`. — lupz, Aug 22 '21 at 15:01
`display: flex`; `flex-direction: column` instead of `float` — SIMBIOSIS surl, Aug 22 '21 at 15:04
id is a unique property and you have given two elements same id it is not a good practice. — , Aug 22 '21 at 15:08

score 0 · Answer 1 · answered Aug 22 '21 at 15:18

.edu{
            display: flex;
            flex-direction: row;
            align-self: flex-start;
        }

<body>
    <section>
        <h2>EDUCATION</h2>
        <div class="edu">
        <p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
        <p id='e2'><strong>June 2021 - May 2022</strong></p>
        <p id='e3'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
    </div>
    </section>
    <hr>
    <section>
        <h2>EXPERIENCE</h2>
</body>

score 0 · Answer 2 · 2021-08-22T15:43:46.457

id should be unique so change #e1 from third p element to your choice but diff.
Used clear:left so that float property on left of hr is cleared
You can also use cleafix hack to <hr> , by adding clearfix class to <hr> and add this CSS

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

You can also add vertical rules using border-right as I specified in code

* {
  box-sizing: border-box/*So that padding used below don't effect width*/
}

hr {
  clear: left
}

#e1 {
  float: left;
  width: 33%; /*Width so that content is divided in 3colums*/
  
  height: 100px;
  /*Height specified so that border become equal for all others and act as a vertical rule*/
  
  border-right: 2px solid red;
  padding: 5px;
}

#e2 {
  float: right;
  width: 33%;
  height: 100px;
  padding: 5px;
}

#e3 {
  float: left;
  width: 33%;
  height: 100px;
  border-right: 2px solid red;
  padding: 5px;
}

<section>
  <h2>EDUCATION</h2>
  <p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
  <p id='e2'><strong>June 2021 - May 2022</strong></p>
  <p id='e3'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
</section>

<hr>
<section class="hed2">
  <h2>EXPERIENCE</h2>

How can I change the position of an element?

2 Answers2

How can I change the position of an
element?