How can I get these two form fields to fill the space between them

Question

I have designed a form and I have the first name and last name fields displayed next to each other horizontally as shown in the image. When a user clicks on a field that field will change colour (yet to be coded).

Currently as shown in the image there is a gap between the First Name field and the Last name field. I can't figure out where this gap is coming from.

How can I remove this gap so that the field takes up all of the space?

The HTML:

    <div class="topBox">
        <div class="closeModal">X</div>
        <div class="clear"></div>
        <div><img src="images/ProvenWordLogoSmall.png" alt="ProvenWord Logo"></div>
    </div>
    <div class="bottomBox">
        <h3>Free Quote Form</h3>
        <form class="freeQuoteForm">
            <div class="nameFields">
                <input type="text" id="firstName" placeholder="First Name" required>
                <input type="text" id="lastName" placeholder="Last Name" required>
            </div>
            <div class="nameFields">
                <input type="email" id="email" placeholder="Email Address" required>
            </div>
        </form>

    </div>
     <script type="text/javascript" src="main.js"></script>         
</body>

The CSS:

.topBox {
    width: 640px;
    margin: 0 auto;
}

.bottomBox {
    background: white;
    margin: 30px auto;
    width: 640px;
    height: 595px;
    border: 1px solid #9c9c9c;;
}

.bottomBox h3 {
    text-align: center;
    padding: 20px 0;
}

.freeQuoteForm {
    width: 530px;
    height: 430px;
    border: 1px solid #9c9c9c;
    text-align: left;
}

input, textarea {
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 100;
    border: none;
}

input[type="text"], input[type="email"] {
    display: inline-block;
    width: 262px;
    height: 60px;
    padding: 0px;

}

input[type="email"] {
    width: 518px;
}

#lastName {
    border-left: 1px solid #9c9c9c;
}

.nameFields {
    border-bottom: 1px solid #9c9c9c;
}

Isnt a duplicate since this time its an text input box so they can't set font-size to zero. — L777, Mar 06 '16 at 03:17
@freestock.tk `font-size: 0` should be set to the parent, not to the inline-level elements. And the other question explains plenty of alternatives, e.g. removing the whitespace in the HTML like in your answer. — Oriol, Mar 06 '16 at 03:48

L777 · Accepted Answer · 2016-03-06T03:30:40.177

I have used percentages to the input fields. The 'last name' field have a border so it was needed to set it as box-sizing: border-box: otherwise it would fall down to the next line.

.bottomBox {
    background: white;
    margin: 30px auto;
    width: 640px;
    height: 595px;
    border: 1px solid #9c9c9c;
    background: lightblue;
}

.bottomBox h3 {
    text-align: center;
    padding: 20px 0;
    background: cornflowerblue;
}

.freeQuoteForm {
    width: 530px;
    height: 430px;
    border: 1px solid #9c9c9c;
    text-align: left;
    background: skyblue;
}

input, textarea {
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 100;
    border: none;
}

input[type="text"] {
    display: inline-block;    
    height: 60px;
    padding: 0px;
}

input[type="email"] {
    height: 60px;
    padding: 0px;
}

#lastName, #firstName {
  padding-left: 5px;
  width: 50%; 
  box-sizing: border-box;
}

#email {
  padding-left: 5px;
  width: 100%;
  box-sizing: border-box;
}

#firstName:focus, #lastName:focus, #email:focus {
  background: paleturquoise; 
}

#lastName {
  margin-left: 0px;
  border-left: 1px solid #9c9c9c;
}

.nameFields {
  border-bottom: 1px solid #9c9c9c;
}

<div class="bottomBox">
<h3>Free Quote Form</h3>
<form class="freeQuoteForm">
<div class="nameFields"><input type="text" id="firstName" placeholder="First Name" required><input type="text" id="lastName" placeholder="Last Name" required></div>
<div class="nameFields">
<input type="email" id="email" placeholder="Email Address" required>
</div>
</form>
</div>

Hey thanks very much. That really helps. Is there a way I can move where the cursor starts so its not up agains the left of the box so much? — chell, Mar 06 '16 at 03:21
You mean add some space between the box-left-wall and the text? add `padding-left: 5px` plus `box-sizing: border-box:` **the snipped was updated with this just right now, re-check please** — L777, Mar 06 '16 at 03:27
Thanks you so much. Really helped me a lot with both understanding of how to use the border-box property and even color the boxes on focus. — chell, Mar 06 '16 at 03:44
This answer fixes the problem because it removes the whitespace between the elements. Not sure why it talks about `box-sizing` instead. — Oriol, Mar 06 '16 at 03:59
@Oriol [**this is the result of this answer without box-sizing**](http://codepen.io/anon/pen/reOgOP?editors=1100) — L777, Mar 06 '16 at 04:03

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

Its the new line character between two inline elements.

How to remove the space between inline-block elements?

edited May 23 '17 at 12:23

Community

1
1

answered Mar 06 '16 at 03:07

Gopikrishna S

2,221
4
25
39

How can I get these two form fields to fill the space between them

2 Answers2