Filip Grebowski Filip Grebowski -3 years ago 114
HTML Question

Aligning a input box inside one of the css-grid boxes

I have created a css grid layout, that splits a container in two halfs. One side presumably for my contact form, the other side for text. Now, I have proceeded to add a bootstrap 3.x input box inside the specific

<div>
tag that holds all the content of the left-side box. For some reason, the input box appears below the left box, not inside, as well as reduces the vertical size of the box (which should span all the way to the bottom of the image). I have colour coded the boxes to represent the issue:

enter image description here

I am not sure how to go about this, I want to include a whole form inside that left box. Below is my whole html and css for this specific container. What could be the issue?

HTML:

<section class="contact-container" id="contact">
<div class="box contact-box-left"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1">
</div>
<div class="box contact-box-right"></div>
</section>


CSS:

/* ======= CONTACT ======= */

.contact-container {
height: 50vh;
background-color: #484747;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}

.contact-box-left {
background-color: pink;
grid-column: 1;
grid-row: 1 / 3;
}

.contact-box-right {
background-color: green;
grid-column: 2;
grid-row: 1 / 3;
}


Thanks for any help.

UPDATE:

To make things easier, here is the jsfiddle: https://jsfiddle.net/7ajhcovg/

Answer Source

Your div.input-group is completely outside of the div.contact-box-left

Just move the .input-group into the correct div.

<section class="contact-container" id="contact">
  <div class="box contact-box-left">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1">
    </div>
  </div>
  <div class="box contact-box-right"></div>
</section>

https://jsfiddle.net/7ajhcovg/1/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download