Geek Answers Handbook

<doctype html> messed up my CSS

In a nutshell, I want the right div float expand vertically 100% but it only works when I don't include <doctype> in my html

in today's standard, do <doctype> really need to be added?

This is the result in Internet Explorer:

doctype issues

it's just just 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>
+6
source share
3 answers

in today's standard do i really need to add <doctype> ?

You < have to do something, but the lack of DOCTYPE essentially states that you agree (in the weakest sense) to the unknown / inconsistent quirks standard.

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

  • make sure the height is set to HTML and BODY elements.
  • make sure the height is set in any parent container.

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 noted in the comments, you probably want the layout to go beyond 100%. This requires a little bit of effort (but still works well within the standard).

This article shows you several ways to run layouts with the same column heights. More details here .

+6
source

If you are considering considering IE (any version in this regard, without being distracted by this topic), then you better specify DOCTYPE. I have seen many pages that do not do this properly through IE in the famous Quirks mode.

+2
source

Use this code

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> html, body { padding:0; margin:0; height:100%; } #wrap { background:red; height:100%; overflow:hidden; } #right { background:blue; float:left; width:30%; height:100%; } #left { background:yellow; float:left; width:70%; height:100%; } </style> </head> <body> <div id="wrap"> <div id="left"> Content </div> <div id="right"> Side Content </div> </div> </body> </html>
+1
source

More articles:


All Articles