CODEWITHSUNDEEP
htmlspacefillbetween
user3519221
user3519221

Reputation: 119

Div fill space between 2 divs

how can I make all divs get on the same line and fill div#2 the space between the left floated div#1 and right floated div#3? Question

Upvotes: 1

Views: 5114

Answers (3)

jbutler483
jbutler483

Reputation: 24559

You could use display: table for this kind of implementation (note this is not using tables for layout):

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  display: table;
  width: 100vw;
}
.one {
  display: table-cell;
  height: 50px;
  width: 20%;
  background: red;
}
.two {
  display: table-cell;
  height: 50%;
  width: 60%;
  background: cornflowerblue;
}
.three {
  display: table-cell;
  background: lime;
  height: 50px;
}
<div class="wrap">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

Notice how I haven't set a width on the last element, yet it's filling the rest of the space available?

Upvotes: 1

Miaonster
Miaonster

Reputation: 1522

Maybe flex will help you, here is an JSFiddle.

HTML

<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

CSS

.parent {
    display: -webkit-flex;
    display: flex;
}
.div1 {
    width: 30px;
    height: 30px;
    background: #FFCC99;
}
.div3 {
    width: 30px;
    height: 30px;
    background: #FCF305;
}
.div2 {
    -webkit-flex: auto;
    flex: auto;
    height: 30px;
    background: #CCFFCC;
}

Upvotes: 4

mehulmpt
mehulmpt

Reputation: 16577

Here's a dummy implementation:

<div id="l"></div>

<div id="r"></div>

<div id="c"></div>

<style>
#l {
float: left;
width:30%;
}
#r { 
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>

Upvotes: 0

Related Questions