Reputation: 15158
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
Reputation: 5135
You can use the calc() method to the middle container like :
width: calc(100% - 400px);
Example here.
Upvotes: 3
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;
}
Upvotes: 3
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
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