0

Why does adding doc type break this layout? How can I make this better?

JSFIDDLE LINK: http://jsfiddle.net/3gA7u/1/

HTML

<body>  
    <div id="maincontainer">
        <div id="leftcolumn">left</div>

        <div id="contentwrapper">right</div>
    </div>
</body>

CSS

body {
margin: 0 auto;
height: 100%;
}

#maincontainer {
width:100%;
height: 100%;
}

#leftcolumn {
float:left;
display:inline-block;
width: 510px;
height: 100%;
background: orange;
}

#contentwrapper {
position: fixed;
float:left;
display:inline-block;
width: -moz-calc(100% - 510px);
width: -webkit-calc(100% - 510px);
width: calc(100% - 510px);
height: 100%;
background-color: red;
}

JSFIDDLE LINK: http://jsfiddle.net/3gA7u/1/

user2133606
  • 347
  • 2
  • 6
  • 15
  • 3
    Adding a `DOCTYPE` is probably *fixing* your layout (as it is with your current CSS), and you were thinking its state without one was "working", when in fact it was probably considered broken. – ajp15243 Jan 10 '14 at 15:47

1 Answers1

0

You need to have min-height on html, body. Fiddle here: http://jsfiddle.net/3gA7u/2/

n1kkou
  • 3,096
  • 2
  • 21
  • 32
  • 1
    What has this to do with the question? –  Jan 10 '14 at 15:49
  • @MikeW "Why does adding doc type break this layout? How can I make this better?" didnt he wanted to have the left column to `100%` height? what is your problem with my answer anyway? – n1kkou Jan 10 '14 at 15:51
  • @n1kkou - What's wrong with your answer is that it's not the min-height setting that's making the left column have 100% of the viewport height, but the other change you made to the fiddle - giving the html element `height:100%`. – Alohci Jan 12 '14 at 01:44