Question

I am trying to align 2 fluid divs side by side here is a preview http://jsfiddle.net/238ha/
of what is looks like now. What I am trying to do, is have two divs

this is the current code

.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%;
}

Here is what I am trying to accomplish

images:
takes up 25% of screen

content:
takes up 75% of screen

However when the user resizes their screen the divs can get bigger, but they have a limit on how small they can get. I have read about flexboxes and I think they might work but their still is not great support for them, and I havent been able to use “flex-flow:row” with any success. I am also using bootstrap alot on the site, so if you know how to do this is bootstrap that would be even better.I appreciate the help.

Answer 1

You’re probably going to want to look at responsive design. Use a fluid layout for anything above the minimum width, and a fixed for below. You should check out media queries for some help.