8

Can we give width and border to <body> and use in place of Container div? see this example

see source code of this file and code of file is also perfectly W3C valid. and looking same in IE 7 and firefox 3.5.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
  <head>
    <title> Width in body</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      html { background-color: #00f; }
     body{background: #cd5c5c;width:800px;height:400px;border:1px solid;color: #fff;margin:0 auto;}
     </style>
  </head>
   <body>
     <p>Hello world!</p>

   </body>
</html>
8
  • 3
    Closed as not a real question, say several people. Actually, it's a perfectly valid question, with interesting answers. Of course, now that the question has been killed, nobody will get to explore this question here. Rather sad. We might have talked about the fact that in some browsers, one used to use a min-width css property on body to assure that content could be seen even in smaller browser situations. This question is a lost opportunity.
    – artlung
    Nov 10, 2009 at 17:31
  • OP needs to provide sample code in the post rather than a link to his web site. As it stands, this post reeks of an effort to promote the OPs web site. Nov 10, 2009 at 17:42
  • 2
    OP means you, the original poster. And thanks for adding the sample code!
    – Pablo
    Nov 10, 2009 at 17:56
  • 3
    I personally think it's ludicrous to object to people posting links to actual code rather than cut-and-pasting the code in place. For anything but the most trivial HTML/CSS/JS question, the only way to properly debug it is as a live page. I've seen a number of questions where I would have been able to give a definitive answer within a minute, but I didn't have time to copy-and-paste all the material (if in fact it was all provided) and deploy it to localhost, potentially having to set up some mock PHP or similar to replicate Ajax interactions. Downvoting because a link is provided is idiotic.
    – NickFitz
    Nov 10, 2009 at 17:59
  • 3
    Furthermore, given that the link goes to a page that just says "Hello World" it can hardly be seen as self-promotion.
    – NickFitz
    Nov 10, 2009 at 18:00
7

Your example answers your question! Body is a block element like any other. It has width, height, padding, margin and border properties.

  • Note that it is essential that the page is rendered in strict, rather than quirks, mode to be able to treat the body element as a block-level element; otherwise it is treated as the documentElement and all bets are off. – NickFitz

Then can we use body in place of #container div? – Jitendra

  • Nice theory. Shame about Microsoft. – David Dorward
  • @Jitendra: you can, but be thorough with your cross-browser testing, particularly when it comes to scrolling :-) – NickFitz

What is the difference between viewport and body? – Jitendra

  • the viewport is the visible area of the browser window which displays the document. The body is an element in the document. In quirks mode, the body will also be treated as the documentElement: that is, the root node of the document, which will fill the window, and if necessary will be able to be scrolled. In strict mode, the html element will be treated as the documentElement, and the body will be a child of that. As an experiment, change your test page by adding the style rule html { background-color: #00f; } - you will see that the html element contains the `body' – NickFitz
9
  • then can we use body in place of #container div? Nov 10, 2009 at 17:25
  • 2
    Nice theory. Shame about Microsoft.
    – Quentin
    Nov 10, 2009 at 17:28
  • 1
    Note that it is essential that the page is rendered in strict, rather than quirks, mode to be able to treat the body element as a block-level element; otherwise it is treated as the documentElement and all bets are off.
    – NickFitz
    Nov 10, 2009 at 18:02
  • 2
    @Jitendra: the viewport is the visible area of the browser window which displays the document. The body is an element in the document. In quirks mode, the body will also be treated as the documentElement: that is, the root node of the document, which will fill the window, and if necessary will be able to be scrolled. In strict mode, the html element will be treated as the documentElement, and the body will be a child of that. As an experiment, change your test page by adding the style rule html { background-color: #00f; } - you will see that the html element contains the `body'
    – NickFitz
    Nov 10, 2009 at 18:26
  • 1
    I found more knowledge from here sitepoint.com/blogs/2009/02/11/… Nov 12, 2009 at 6:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.