0

Here is a codepen link: http://codepen.io/anon/pen/lfoxv/

As you can see, the layout loads fine, but upon any kind of resizing of the browser window, the layout breaks until the page is refreshed. This seems to be the only combination of parameters that allows me keep the aspect ratio of an image when using percentage based divs. Fixed height layouts are tough...

dnv
  • 969
  • 1
  • 7
  • 15

1 Answers1

1

I fixed your code. Please see this link: http://codepen.io/anon/pen/bBjDm/

Your code:

#middle {
    background-color:rgb(200,200,200);
    display:inline-block;
    height:100%;
    <!--width:auto;-->
}

Updated code:

#middle {
    background-color:rgb(200,200,200);
    display:inline;
    height:100%;
    <!--width:auto;-->
}
  • Oh, thankyou! Is there a conceptual reason inline needs to be in the center like that? – dnv Apr 15 '14 at 12:38
  • 1
    @dnv No. It's the different between inline & inline-block. Please refer to this answer about its differences: http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block. –  Apr 15 '14 at 12:49