SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to expand <body> width

    Greetings ladies and gents,

    I am having trouble getting the body width of my content to expand to the size of its elements. I have set up a test case at:
    http://www.jamesdam.com/demonstrations/body-width.html

    Notice how the width of the body tag (the blue) does not expand with the width of the content div (the white). Does anyone know how to make the body expand so that it is as wide as it needs to be, rather than as wide as the viewport?

    Cheers!

    (I've included the code below; it doesn't work as I expect it to in Safari or Firefox.)

    Code:
    <html>
    <head>
    <style>
    html {
    	padding: 2em;
    	background-color: yellow;
    }
    
    body {
    	padding: 2em;
    	background-color: blue;
    }
    
    #content {
    	padding: 2em;
    	background-color: white;
    	width:5000px;
    }
    </style>
    </head>
    <body>
    <div id="content">
    Hello world!
    </div>
    </body>
    </html>
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  2. #2
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I managed to find a solution. I set the <html> tag to position:absolute.

    See http://www.jamesdam.com/demonstratio...dth-fixed.html to see what I mean.

    Edit: Nevermind, that only works in Safari.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  3. #3
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    position:absolute on <body> seems to do the trick in Firefox, Safari, and IE.

    http://www.jamesdam.com/demonstratio...h-fixed-2.html
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2006
    Location
    Essex, UK
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    position:absolute on <body> seems to do the trick in Firefox, Safari, and IE.

    http://www.jamesdam.com/demonstratio...h-fixed-2.html
    The padding on the right is lost in that version in Opera. The 2nd version looked best in Opera.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •