CODEWITHSUNDEEP
htmlcss
PassionateDeveloper
PassionateDeveloper

Reputation: 15158

Dynamic width of div between 2 other divs?

I have a design that should be:
Left container 200px
middle container dynamic
right container 200px

That means the midde container should be as much width as possible, specialy when the user resizes the browser.
I know what I describe is a perfect thing for a table, left and right td to width=200 and middle-td without width and the middle resizes perfectly to the scretch of the screen.
But to given reasons I have to use Div container here not a table.

So how to do this?

Upvotes: 1

Views: 113

Answers (4)

Florin Pop
Florin Pop

Reputation: 5135

You can use the calc() method to the middle container like :

width: calc(100% - 400px);

Example here.

Upvotes: 3

red_clover
red_clover

Reputation: 106

You can use display: table to replicate table behaviour with divs like so:

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

.wrapper {
  display: table;
  width: 100%;
}
.wrapper div {
  display: table-cell;
}
.left {
  width: 200px;
}
.right {
   width: 200px;
}

Demo @ CodePen

Upvotes: 3

Ramsay Smith
Ramsay Smith

Reputation: 1108

First you define all the divs as display: inline-block and then you style the left and right divs with a width of 200px and let them float. Then set the container width to the desired width.

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>

Then give the middle one margin: 0 200px;

The left one: margin-right: -200px;

The right one: margin-left: -200px;

Upvotes: 0

rootman
rootman

Reputation: 670

Give the middle one margin: 0 200px;

The left one: margin-right: -200px;

The right one: margin-left: -200px;

And let them float. Make sure to set the width of the outer ones to 200px aswell.

Upvotes: 0

Related Questions