Reputation: 7455
I have the following problem: I need to display informations in 2 columns first column should have static width, and second column should fill width to the resolution of page.
Here is my solution for this, but it doesn't work completely correct. I have used box-sizing: border-box
and position: absolute
for this but with this parent of the record ignore height of the absolute positioning children.
I need to show all the content of each column. I also have some restrictions: solution should be compatible with IE9 so I cannot use flexbox.
Upvotes: 1
Views: 78
Reputation: 38262
You can have two compatible solutions here:
First using box-sizing
you are close but remove the position:absolute
The demo http://jsfiddle.net/3AvdP/21/
Two using calc
for the width:
The demo http://jsfiddle.net/3AvdP/20/
Upvotes: 0
Reputation: 2432
Try setting the parent element to display: table; width: 100%;
and the columns display: table-cell;
and a width for the fixed width column. This will set your fixed column to a specific width and then use the other column to fill the rest.
Upvotes: 1