I am attempting to line up two fluid divs next to each other. You can see a preview of the current layout here. My goal is to have two flexible divs side by side.
This is the code I currently have:
.images {
border: 1px solid red;
position:absolute;
top:40px;
left:0px;
float:left;
width: 25%;
min-width: 305px;
height: 95%;
}
.content {
border: 1px solid blue;
position:absolute;
top:40px;
left: 25%;
width:70%;
min-width: 60%;
height: 95%;
}
My desired outcome is as follows:
Images: takes up 25% of the screen
Content: takes up 75% of the screen
However, when the user resizes their screen, I want the divs to expand but not shrink beyond a certain point. I have looked into using flexboxes, but there isn't widespread support for them yet. I have also tried using "flex-flow: row" without much success. Since I am already using Bootstrap on the site, a solution within Bootstrap would be ideal. Any assistance would be greatly appreciated.