Home/ Questions/Q 8979859
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:56:36+00:00

In a nutshell, i want a right div float to extend vertically 100% but

  • 0

In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don’t include <doctype> on my html

in today’s standard, do i really have to add <doctype>?

This is the result in Internet Explorer:

doctype issues

this is just simple html

<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>

<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    in today’s standard, do i really have to add <doctype>?

    You don’t have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent “quirks” standard.

    I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.

    • ensure that height is set on the HTML and BODY elements.
    • ensure that height is set on any parent containers.

    Working example: http://jsfiddle.net/7xxFj/

    <div id="one">
    First column
</div>
<div id="two">
    second column
</div>​

HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }

    As @BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).

    This article shows several methods for accomplishing layouts with equal column heights. More methods here.

    • 0