Css Scale Divs In Float Layout

I want to create an automatic scaling layout without using the height property. I use a float layout between two divs, as shown in the image. The boxes in the middle have content o

Solution 1:

Try reading this article at css-tricks.

My favorite choice is probably the one taken from Paul Irish's blog at HTML5Rocks - however it does rely on modern browsers. I've created a JSFiddle based on his code:

CSS

.box {
  /* basic styling */width: 100%;
  height: 95px;
  border: 1px solid #555;
  font: 14px Arial;
  /* flexbox setup */display: -webkit-box;
  -webkit-box-orient: horizontal;
  display: -moz-box;
  -moz-box-orient: horizontal;
  display: box;
  box-orient: horizontal;
}

.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

/* our colors */.box > div:nth-child(1){ background : #FCC; }
.box > div:nth-child(2){ background : #CFC; }
.box > div:nth-child(3){ background : #CCF; }

HTML

<divclass="box"><div>A</div><div>B</div><div>C</div></div>

However note this won't work with legacy browsers, and if you're targeting those, I suggest you just adopt a table layout.

Solution 2:

I have made a JsFiddle.

What I basically do, is use the position:absolute in combination with the top and bottom CSS property to force the inner div to take full height.

HTML:

<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

CSS:

body{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#top{
    width: 100%;
    height: 30px;
    background: blue;
    position: absolute;
}

#bottom{
    width: 100%;
    height: 30px;
    background: yellow;
    position: absolute;
    bottom: 0px;
}

#middle{
    width: 30%;
    position: absolute;
    top: 30px;
    bottom: 30px;
    background: gray;
}

Solution 3:

Use min-height. Examples of this property are provided below.

MDN

MSDN