How do I make one element in a row change width when I resize the window

Question

I am looking at overstock.com and they have a row where the logo, the search bar, and couple of icons are all in one div. But, when you resize the window the only element that changes its width is the search bar. In my example, I try to copy it, but whenever I hit a certain window width the section that has 4 circles in it drops out of the container that holds everything. Is there a way to only make one element resize when the window resizes in css?

Edit: this is not the same as the possible duplicate of another question. The primary reason why is the fact that in my questions there are three sections in one row and I am trying to only effect the middle section to resize. The other question is asking how to fill a remaining space with only two sections. In addition to they only want the right section to take up the remaining space. That is not what I'm trying to do, I only want the middle section to resize when I resize the window

CSS

.container {
  border:1px solid grey;
  height:60px;
  margin: 15px auto;
  position:relative;

}

.container.a > div {

}

#search input {
  width:auto;
  border-radius:5px;
  border-color:grey;
  width:100%;
}

.icon {
  background:crimson;
  border-radius:50%;
  height:60px;
  width:60px;
  display:inline-block;
}

#icon-set {
  margin-left:15px;
}

#icon-set:after {
  display:table;
  content:"";
  clear:both;
}

.log {
  font-size:36px;
  font-weight:bold;
  margin-right:15px;
}

.search-bar {
  max-width:700px;
  width:100%;
  position:relative;
  max-height:35px;
  align-self:center;
}

.search-bar form {
  width:inherit;
  padding-right:52px;
}

.inp {
  width:inherit;
  height:35px;

}

.but {
  position:absolute;
  right:0;
  width:52px;
  height:35px;
  background:crimson;
  color:white;
  border-style:none;
  top:0;
}

Possible duplicate of [How to make a div to fill a remaining horizontal space?](http://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space) — Gezzasa, Apr 26 '17 at 05:42

score 1 · Accepted Answer · answered Apr 26 '17 at 05:59

One way to do it is to treat your layout divs as table cells. apply a fixed width to your logo on the left and icons div on the right and then leave the middle div to fill the empty space.

Here's a simplified version of your code above.

.container {
      display:table;
      border:1px solid grey;
      height:60px;
      margin: 15px auto;
      position:relative;
    }
    .log {
      display:table-cell;
      width:100px;
      background:blue;
      font-size:36px;
      font-weight:bold;
      margin-right:15px;
    }
    .search-bar {
      display:table-cell;
      position:relative;
      max-height:35px;
      align-self:center;
    }
    #icon-set{
      display:table-cell;
      width:200px;
      background:red;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="log">logo</div>
  <div class="search-bar">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>
    <!-- /input-group -->
  </div>
  <div id="icon-set"></div>
</div>

Thanks for the answer, but I would think CSS would have a better way to do this by now. I always see websites where there header is filled with a lot of content, but only one section is being resized. But maybe, they are using table-cells as well — black_yurizan, Apr 26 '17 at 12:10

score 0 · Answer 2 · answered Apr 26 '17 at 05:51

<div class="container a">
    <div class="row">
         <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
              <div class="log">Logo</div>
         </div>
         <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
             <div class="search-bar">
               <form >
                 <input type="text" class="inp" />
                 <button class="but fa fa-search"></button>
               </form>
             </div>
             <div id="icon-set" >
                <div class="icon"></div>
                <div class="icon"></div>
                <div class="icon"></div>
                <div class="icon"></div>
             </div>
          </div>
    </div>
</div>

.form_section {
width:100%; height:auto; margin:0px; padding:10px; border:1px solid #ddd;
}
.log{
font-size:36px; font-weight:bold; margin-right:15px;
}
.search-bar{
float:left; width:48%; position:relative; max-height:35px; align-self:center; 
}
.inp{
width:80%; height:35px; border-radius:5px 0px 0px 5px; border:1px solid #ddd; margin:0px; padding:5px 10px; float:left;
}
.but{
width:52px; height:35px; background:crimson;  color:white;  border-style:none; float:left;
}
.icon{
background:crimson; border-radius:50%; height:40px; width:40px; display:inline-block; margin:0px; padding:0px;
}
#icon-set{
margin-left:15px; float:right;
}
#icon-set:after {
display:table; content:""; clear:both;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
 <div class="form_section">
        <div class="row">
              <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                  <div class="log">Logo</div>
              </div>
              <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                  <div class="search-bar">
                       <form >
                          <input type="text" class="inp" />
                          <button class="but fa fa-search"></button>
                      </form>
                  </div>
                  <div id="icon-set" >
                    <div class="icon"></div>
                    <div class="icon"></div>
                    <div class="icon"></div>
                    <div class="icon"></div>
                  </div>
              </div>
        </div>
    </div>
</div>

How do I make one element in a row change width when I resize the window

2 Answers2