I need the solution (if it exists), to be compatible with IE 9+ , so it can't use flexbox.
I have encountered a problem when compatable with IE 9.
The problem is that in IE 9 it is not compatible with anything flexboxso I need to know if there is an alternative to do what can be seen in the snippet.
The result of what it would look like in IE 9 is like removing the display:flex;container property .container.
Explanation:
- A main container, with 2 child containers.
- Main container: It has to occupy 100% and have the height that the children need (auto).
- Child container (image): The first container is an empty div with a background of an image. It has to occupy the (100% - y%) width of the page and the height has to be 100% of the parent.
- Child container (content): The second container for the content, has to occupy y% width and the height you need. (This container is the one that should delimit the height of the others)
.container {
width: 100%;
outline: 1px solid red;
display: flex; /*Comentar para simular IE ya que no es compatible */
}
.imgCol {
position: relative;
overflow: hidden;
width: 25%;
height: auto;
float: left;
background-image: url(https://cdn-scor-prd-01.azureedge.net/cefinvestorcenter/-/media/aam-web/images/cefcenter/400x800-cef-insights.ashx?h=800&la=en-US&w=400&hash=E1BAC22A62EC20C8288886AE154489715A03DD3C&modified=20181127174522);
background-position: bottom;
background-size: cover;
outline: 1px solid green;
min-height: 1px;
}
.content {
width: 75%;
float: left;
outline: 1px solid blue;
}<div class="container">
<div class="imgCol">
<!-- Background image-->
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur. Viverra mauris in aliquam sem. Venenatis a condimentum vitae sapien pellentesque. In massa tempor nec feugiat nisl pretium fusce. Tellus molestie nunc non blandit massa enim nec. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Sit amet aliquam id diam maecenas ultricies mi eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Et magnis dis parturient montes. Tristique magna sit amet purus. Quam viverra orci sagittis eu. Eget velit aliquet sagittis id consectetur. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Pulvinar sapien et ligula ullamcorper malesuada proin. Sed cras ornare arcu dui vivamus arcu.</p>
<p>Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Feugiat pretium nibh ipsum consequat nisl. Quam vulputate dignissim suspendisse in est ante in nibh. Sed pulvinar proin gravida hendrerit. Quisque sagittis purus sit amet volutpat consequat mauris. Eget sit amet tellus cras adipiscing enim. Purus in mollis nunc sed id semper. Sit amet purus gravida quis blandit turpis. Rhoncus urna neque viverra justo nec ultrices dui sapien. Faucibus et molestie ac feugiat. Nunc aliquet bibendum enim facilisis gravida neque. Donec massa sapien faucibus et molestie ac feugiat sed. Et tortor at risus viverra adipiscing at. Urna nunc id cursus metus aliquam eleifend mi in. Nec ullamcorper sit amet risus nullam eget felis. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.</p>
<p>Blandit libero volutpat sed cras ornare. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Proin fermentum leo vel orci porta non pulvinar. Donec enim diam vulputate ut. Etiam sit amet nisl purus in mollis nunc sed id. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Risus feugiat in ante metus dictum at tempor commodo. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ut diam quam nulla porttitor massa id neque. Imperdiet nulla malesuada pellentesque elit eget gravida. Convallis a cras semper auctor. Posuere sollicitudin aliquam ultrices sagittis orci a. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Laoreet suspendisse interdum consectetur libero id faucibus.</p>
</div>
</div>I have tried several different properties to simulate the "flexbox" style but without getting what I want.
display: table|block|table-cell|inline-block;display: inline-block; height: 100%;(In the son based on the guide that I attached)
What I need is something like this Equal height columns , with the difference that I need the background of the container on the left to be a background-image of width 25% . If it is done as in this guide, the image would be widened since even if it is only 25% visible, it is occupying 100%.
In high screen dimensions it loses quality and would look bad:
.container2 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
}
.container {
width: 100%;
position: relative;
float: left;
outline: 1px solid red;
right: 75%;
background-image: url(https://cdn-scor-prd-01.azureedge.net/cefinvestorcenter/-/media/aam-web/images/cefcenter/400x800-cef-insights.ashx?h=800&la=en-US&w=400&hash=E1BAC22A62EC20C8288886AE154489715A03DD3C&modified=20181127174522);
background-position: bottom;
background-size: cover;
}
.imgCol {
position: relative;
width: 25%;
float: left;
outline: 1px solid green;
min-height: 1px;
overflow: hidden;
left: 75%;
}
.content {
width: 75%;
float: left;
outline: 1px solid blue;
position: relative;
overflow: hidden;
left: 75%;
}<div class="container2">
<div class="container">
<div class="imgCol">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur. Viverra mauris in aliquam sem. Venenatis a condimentum vitae sapien pellentesque. In massa tempor nec feugiat nisl pretium fusce. Tellus molestie nunc non blandit massa enim nec. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Sit amet aliquam id diam maecenas ultricies mi eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Et magnis dis parturient montes. Tristique magna sit amet purus. Quam viverra orci sagittis eu. Eget velit aliquet sagittis id consectetur. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Pulvinar sapien et ligula ullamcorper malesuada proin. Sed cras ornare arcu dui vivamus arcu.</p>
<p>Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Feugiat pretium nibh ipsum consequat nisl. Quam vulputate dignissim suspendisse in est ante in nibh. Sed pulvinar proin gravida hendrerit. Quisque sagittis purus sit amet volutpat consequat mauris. Eget sit amet tellus cras adipiscing enim. Purus in mollis nunc sed id semper. Sit amet purus gravida quis blandit turpis. Rhoncus urna neque viverra justo nec ultrices dui sapien. Faucibus et molestie ac feugiat. Nunc aliquet bibendum enim facilisis gravida neque. Donec massa sapien faucibus et molestie ac feugiat sed. Et tortor at risus viverra adipiscing at. Urna nunc id cursus metus aliquam eleifend mi in. Nec ullamcorper sit amet risus nullam eget felis. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.</p>
<p>Blandit libero volutpat sed cras ornare. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Proin fermentum leo vel orci porta non pulvinar. Donec enim diam vulputate ut. Etiam sit amet nisl purus in mollis nunc sed id. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Risus feugiat in ante metus dictum at tempor commodo. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ut diam quam nulla porttitor massa id neque. Imperdiet nulla malesuada pellentesque elit eget gravida. Convallis a cras semper auctor. Posuere sollicitudin aliquam ultrices sagittis orci a. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Laoreet suspendisse interdum consectetur libero id faucibus.</p>
</div>
</div>
</div>
Putting the parent a
display: table, the child columns adisplay: table-celland removing the child columns thefloat:leftshould work for you.Using the
display: tabledefault rule will try to make the element look similar to a table, which includes among other things that the elementsdisplay: table-cellinside it have the same height (all columns adapted to the height of the tallest). But this conflicted with thefloat: leftone you had defined for the columns, since both rules try to place the elements in their own way.The use of
display: tableis supported by Internet Explorer since version 8.0, so this solution should be compatible with your requirement.