CODEWITHSUNDEEP
htmlcss
Karthik Malla
Karthik Malla

Reputation: 5810

How to adjust middle div width automatically?

When there are 3 items/divs/elements how can I make the middle div automatically adjust to 100% width?

Like

<div style="width:500px; height:50px;">
<div style="float:left; width:50px; height:50px; background-color:red;">
a
</div>

<div style="float:right; width:50px; height:50px; background-color:red;">
b
</div>
<div style="width:auto; height:60px; background-color:blue;">
middle
</div>
    <div style="clear:both;"></div>
</div>

I shouldn't use fixed width for middle div, as the parent div width 500px will be responsive width, adjusting while changing the browser size.

I also tried like

<div style="text-align:center;"> THIS WILL BE DYNAMIC WIDTH
<div style="display:inline-block; width:100px;">
First Div
<div style="display:inline-block; width:WHAT SHOULD I WRITE HERE?;">
Middle Div
</div>
<div style="display:inline-block; width:100px;">
Right Div
</div>
</div>

Upvotes: 1

Views: 1551

Answers (3)

dippas
dippas

Reputation: 60573

You can use CSS TABLES

html,
body {
  margin: 0;
}
.wrapper {
  display: table;
  width: 100%;
}
.left,
.middle,
.right {
  display: table-cell;
}
.left {
  width: 100px; /*whatever you need here */
  min-width: 100px; /*whatever you need here */
  background: #ff0;
}
.right {
  width: 200px; /*whatever you need here */
  min-width: 200px; /*whatever you need here */
  background: #f00;
}
.middle {
  background-color:#ccc
  }
<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="middle">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

Upvotes: 1

waqas
waqas

Reputation: 19

use width:100%, it will occupy all the available space.

Upvotes: 0

emmanuel
emmanuel

Reputation: 9615

You just have to change:

<div style="width:auto; height:60px; background-color:blue;">

To

<div style="margin: 0 50px; height:60px; background-color:blue;">

And it will work as you expected.

Fiddle: http://jsfiddle.net/o0twxh5j/

Hope this helps

Upvotes: 1

Related Questions