align full width search bar on left box and set a padding

Question

I need to place a search bar on the bottom left box of the page and it has to take full width with height of 40px. However, when I set a padding to the input to avoid the placeholder to be too close to the border, the search box doesn't respect the width of the parent box and occupies space out of it.

Codepen: https://codepen.io/gabrielmlinassi/pen/gObJQQQ?editors=1100

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.box {
  height: 100%;
  width: 100%;
}

.box .top {
  height: 30%;
  width: 100%;
  background-color: #cccccc;
}

.box .bottom {
  background-color: #ffffff;
  height: 70%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.box .bottom .left {
  background-color: #f7f7f7;
  border: solid 1px #cccccc;
  border-radius: 8px;
  margin-top: -100px;
  margin-left: 50px;
  width: 59.5%;
  height: 100%;
}

.box .bottom .right {
  background-color: #f7f7f7;
  border: solid 1px #cccccc;
  border-radius: 8px;
  margin-top: -100px;
  margin-left: 15px;
  margin-right: 50px;
  width: 40%;
  height: 100%;
}

.box .bottom .left .search-wrap {
  display: flex;
  width: 100%;
  height: 40px;
}

.box .bottom .left .search-wrap .search-box {
  width: 100%;
  height: 100%;
  margin: 15px;
}

.box .bottom .left .search-box input {
  width: 100%;
  height: 100%;
  padding: 0 15px; 
}

 <div class="box">
      <div class="top"></div>
      <div class="bottom">
        <div class="left">
          <div class="search-wrap">
            <div class="search-box">
              <input type="text" placeholder="searh" />
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>
    </div>

How do I solve it?

score 1 · Accepted Answer · answered Jan 30 '20 at 00:47

Add box-sizing: border-box; to include the padding in the 100% width.

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.box {
  height: 100%;
  width: 100%;
}

.box .top {
  height: 30%;
  width: 100%;
  background-color: #cccccc;
}

.box .bottom {
  background-color: #ffffff;
  height: 70%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.box .bottom .left {
  background-color: #f7f7f7;
  border: solid 1px #cccccc;
  border-radius: 8px;
  margin-top: -100px;
  margin-left: 50px;
  width: 59.5%;
  height: 100%;
}

.box .bottom .right {
  background-color: #f7f7f7;
  border: solid 1px #cccccc;
  border-radius: 8px;
  margin-top: -100px;
  margin-left: 15px;
  margin-right: 50px;
  width: 40%;
  height: 100%;
}

.box .bottom .left .search-wrap {
  display: flex;
  width: 100%;
  height: 40px;
}

.box .bottom .left .search-wrap .search-box {
  width: 100%;
  height: 100%;
  margin: 15px;
}

.box .bottom .left .search-box input {
  width: 100%;
  height: 100%;
  padding: 0 15px; 
  box-sizing: border-box;
}

<div class="box">
      <div class="top"></div>
      <div class="bottom">
        <div class="left">
          <div class="search-wrap">
            <div class="search-box">
              <input type="text" placeholder="searh" />
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>
    </div>

Note: In most cases, it's useful to include a general rule for all elements with this setting, like this:

* {
  box-sizing: border-box;
}

Perfect! Work like a charm! Thank you!!! – Gabriel Linassi Jan 30 '20 at 00:50 — Gabriel Linassi, Jan 30 '20 at 00:50

align full width search bar on left box and set a padding

1 Answers1