Why is my border overflowing into my other div?

Question

I am creating a contact portion of my portfolio but for some reason the border I set for one div is overflowing into the next div. Here is what it looks like with the code

//CSS
.contact-cont {
  padding: 4rem 12rem 0rem;
  height: 90vh;

  background-color: rgb(232, 234, 246);
}

.contact {
  float: left;
  padding: 1.5rem 4rem 1.5rem;
  margin-right: 1rem;
  border: 2px solid black;
}

.email {
  color: black;
  text-align: center;
  border: 2px solid black;
}

.contact h1 {
  padding-bottom: 2rem;
  width: 50%;
}

//JSX
<div className='contact-cont '>
      <div className='contact '>
        <h1>
          <strong>Let's chat</strong>
        </h1>
        <Form>
          <Form.Row>
            <Form.Group as={Col} controlId='formGridEmail'>
              <Form.Label>Email</Form.Label>
              <Form.Control placeholder='Enter email' />
            </Form.Group>

            <Form.Group as={Col} controlId='formGridPassword'>
              <Form.Label>Subject</Form.Label>
              <Form.Control placeholder='Subject' />
            </Form.Group>
          </Form.Row>
          <Form.Group controlId='exampleForm.ControlTextarea1'>
            <Form.Label>Comment</Form.Label>
            <Form.Control as='textarea' rows='10' />
          </Form.Group>

          <Button variant='primary' type='submit'>
            Submit
          </Button>
        </Form>
      </div>
      <div className='email'>
        <h1>
          <strong>Or you can email me directly at:</strong>
        </h1>
        <h2>jondoe@gmail.com</h2>
      </div>
    </div>

:

And here is what I want it to look like:

Why is the email div overflowing into my contact form?

Your snippet doesn't match the image. – wazz Oct 20 '20 at 19:09 — wazz, Oct 20 '20 at 19:09

score 1 · Accepted Answer · answered Oct 20 '20 at 19:24

1

To solve this problem must be added float: left; on class .email

.email {
    color: black;
    text-align: center;
    border: 2px solid black;
    float: left; /* <------------ */
}

answered Oct 20 '20 at 19:24

54ka

3,501
2
9
24

That did it! I don't understand why that works though. Can you elaborate? – Casey Cling Oct 20 '20 at 19:31
Because the first element `.contact` has been added `float: left`. The position of the next element depends on this float – 54ka Oct 20 '20 at 19:40

score 0 · Answer 2 · answered Oct 20 '20 at 19:18

Probably because your .contact is floated. An item which is floated is basically "removed" from your flow. That's why your .email is spanning over the entire width of the page.

Don't float .contact to the left, but float .email to the right. You'll probably have to play with the width of both containers to get it just right.

Best thing to do after using this is to clear after your float.

.contact-cont:after {
    content: '';
    display: block;
    clear: both;
    float: none;
}

This prevents other divs following your wrapper from being pushed up if your floating element would be higher than the non-floating element.

Why is my border overflowing into my other div?

2 Answers2