CODEWITHSUNDEEP
htmlcss
gfdfgf fgfdfg
gfdfgf fgfdfg

Reputation: 49

make div under div with equal width

i have these three divs, I added a div with id m I need it to go down under the div with name wide having the same width. Thanks for your help.

This is my code.

#parent {
  display: flex;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
  width: 100%;
}

#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

#m {}

@media all and (max-width:800px) {
  #wide,
  #narrow {
    flex: 0 0 100%;
  }
  #parent {
    flex-wrap: wrap;
  }
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>

Upvotes: 1

Views: 380

Answers (3)

GD Singh
GD Singh

Reputation: 1

#parent {
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

#narrow {
  background: lightblue;
  /* Just so it's visible */
  flex: 1 90%;
}

#wide {
  flex: 1 10%;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

#m {
}

@media all and (max-width:800px) {
  #wide,
  #narrow {
    flex: 0 0 100%;
  }
  #parent {
    flex-wrap: wrap;
  }
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

If you can use fixed width on narrow element you can use calc().

#parent {
  display: flex;
  flex-wrap: wrap;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 0 0 calc(100% - 200px);
  background: lightgreen;
}
#m {
  flex: 0 0 calc(100% - 200px);
  background: green;
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>

You can also use CSS Grid Layout for this.

#parent {
  display: grid;
  grid-template-columns: 1fr 200px;
}

#narrow {background: lightblue;}
#wide {background: lightgreen}
#m {background: green}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>

Upvotes: 1

Pete
Pete

Reputation: 58422

You can use the calc function to make it the same width as your wide div:

#parent {
  display: flex;
  flex-wrap: wrap;
  width:100%;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}

#wide {
  flex-grow: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

#m {
  width: calc(100% - 200px);
  background: blue;
}

@media all and (max-width:800px) {
  #wide,
  #narrow,
  #m {
    width: 100%;
  }
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
  <div id="m">m</div>
</div>

Upvotes: 0

Related Questions