Floating 4 input boxes equally with background color

Question

I am trying to float 4 boxes along the full width of my webpage with equal spacing between them.

Currently the output looks as follows:

This was achieved with the following HTML and CSS

.info {
  background-color: black;
  padding: 20px 20px 40px 20px;
  margin-bottom: 10%;
}

.go_button {
  width: 175px;
  background-color: #01C3A7;
  border: none;
  cursor: pointer;
  border-radius: 0.429rem;
  color: #FFFFFF;
  font-family: Circular, Helvetica, Arial, sans-serif;
  font-size: 1.429rem;
  font-weight: bold;
  letter-spacing: 0px;
  padding: 3px;
}

.box {
  float: left;
}

<div class="info">
  <div class="box_container">
    <div class="box">
      <input type="text" placeholder="Departure Station" id="depart">
      <input type="hidden" id="departID" name="DeptStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" placeholder="Arrival Station" id="arrive">
      <input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" id="datepicker" value="@DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
    </div>
    <div class="box">
      <input type="text" id="timepicker" name="time">
    </div>
    <div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
  </div>
</div>

The output I am trying to require is as follows:

I want this to be able to resize according to the screen display and therefore cannot set a margin using pixels. Currently when i do resize the output, it produces the following:

As you can see, the background color does not fill all four boxes. I have added height:auto and this does not fix the issue.

Please can you let me know how to fix these issues.

Pete · Answer 1 · 2018-01-23T13:05:25.723

I would use flexbox with justify-content:space-between rather than floats

.info {
  background-color: black;
  padding: 20px 20px 40px 20px;
  margin-bottom: 10%;
}

.go_button {
  width: 175px;
  background-color: #01C3A7;
  border: none;
  cursor: pointer;
  border-radius: 0.429rem;
  color: #FFFFFF;
  font-family: Circular, Helvetica, Arial, sans-serif;
  font-size: 1.429rem;
  font-weight: bold;
  letter-spacing: 0px;
  padding: 3px;
}

.box_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

<div class="info">
  <div class="box_container">
    <div class="box">
      <input type="text" placeholder="Departure Station" id="depart">
      <input type="hidden" id="departID" name="DeptStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" placeholder="Arrival Station" id="arrive">
      <input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" id="datepicker" value="@DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
    </div>
    <div class="box">
      <input type="text" id="timepicker" name="time">
    </div>
    <div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
  </div>
</div>

score 1 · Answer 2 · answered Jan 23 '18 at 13:03

You could use flex box.

try something out like the following:

FIDDLE

https://jsfiddle.net/pcehxx7f/16/

HTML

<div class="container">
  <div class="box">
    <input type="text">
  </div>
  <div class="box">
    <input type="text">
  </div>
  <div class="box">
    <input type="text">
  </div>
  <div class="box">
    <input type="text">
  </div>
</div>

CSS

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

.box { 
  padding: 0 10px;
}

.box input { 
  width: 100%;
}

score 1 · Answer 3 · answered Jan 23 '18 at 13:06

I would use the next hack...

.box_container:after{
  content:'';
  display:block;
  clear:both;
}

This adds a last element in your container, using the clear property, this is happening because the float element don't take space in its container..

.info {
    background-color: black;
    padding: 20px 20px 40px 20px;
    margin-bottom: 10%;
}
.go_button {
    width: 175px;
    background-color: #01C3A7;
    border: none;
    cursor: pointer;
    border-radius: 0.429rem;
    color: #FFFFFF;
    font-family: Circular,Helvetica,Arial,sans-serif;
    font-size: 1.429rem;
    font-weight: bold;
    letter-spacing: 0px;
    padding: 3px;
}
.box {
    float: left;
}
.box_container:after{
  content:'';
  display:block;
  clear:both;
}

<div class="info">
    <div class="box_container">
        <div class="box">
            <input type="text" placeholder="Departure Station" id="depart">
            <input type="hidden" id="departID" name="DeptStationID" style="display: none">
        </div>
        <div class="box">
            <input type="text" placeholder="Arrival Station" id="arrive">
            <input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
        </div>
        <div class="box">
            <input type="text" id="datepicker" value="@DateTime.Now.Date.ToString("yyyy/MM/dd")" name="DeptDate">
        </div>
        <div class="box">
            <input type="text" id="timepicker" name="time">
        </div>
        <div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
    </div>
    </div>

This only clears the floats, it doesn't answer OPs problem of *I am trying to float 4 boxes along the **full width of my webpage with equal spacing between them*** — Pete, Jan 23 '18 at 13:09

score 0 · Answer 4 · answered Jan 23 '18 at 13:22

0

Use Clearfix to automatically close elemts float.

How it works is well described in this question: What is a clearfix?

But much better solution is to use flexbox. Nice flexbox guide can be found on css-tricks.com

answered Jan 23 '18 at 13:22

Xopoc

254
2
5

Floating 4 input boxes equally with background color

4 Answers4