Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Is this correct?

    Hi - this is more of a discussion than an actual question - here's my situation:


    I have several divs. One of the divs, (which has a wrapper div around it), is wider than the screen.

    In my thinking the wrapper div should be the same width as the overwidth div, (after all, there's no positioning going on here or anything. No overflow values set).

    Furthermore, if there is another div within the wrapper, and I set it's width to 100% it too should be the same width as the overwidth div, (since it should be 100% of the width of the wrapper, which should be the width of the overwidth div.

    However, this is not the case! If I load up a page like this and scroll along horizontally in Firefox all of the divs except the overwidth div only go to the edge of the viewport. In IE the wrapper extends to the width of the overwidth div but the div with width 100% does not.

    Am I wrong? Is this how it should be? Or do I need to be explicitly setting the width of every parent div, (kind of defeats the purpose, but I tried setting the width of the parent div, and of the body & html to 100% but got the same result).

    Let me know, please. And I'd like to hear everyone else's experiences with this.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Divs automatically expand to the width they can go. So if you have a div in a div both not having widths set to them then they expand to the div that does have a width. If you have a wrapper div 750px wide and don't set a width to any of the other divs in it then those divs will also be 750px wide unless they are floated or positioned absolute. Perhaps you should post your code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    First, the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test Page</title>
    <style type="text/css">
    body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    }
    div {
    margin: 0;
    padding: 0;
    }
    
    #wrapper {
    background-color: #EEEEFF;
    height: 300px;
    border: 1px solid #333333;
    width: 100%;
    }
    #normal {
    background-color: #AAAAFF;
    height: 30px;
    width: 100%;
    }
    #oversize_container {
    background-color: #AAFFAA;
    height: 50px;
    }
    #oversize {
    background-color: #66FF66;
    height: 30px;
    width: 500px;
    }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="normal">normal div</div>
    <div id="oversize_container">
    <div id="oversize">the oversize div</div>
    </div>
    
    </div>
    
    </body>
    </html>
    The issue I'm having is not having the rest of the divs expand to be the same width as the div that has a set width when the browser window is narrower than the width of the set-width div.
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yeah see a divs width is already 100% of its container by default. You can set a min-width of 500px. min-width isn't supported by IE but you can fake a min-width. I've done so in this example.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test Page</title>
    <style type="text/css">
    body, html {
    margin: 0;
    padding: 0;
    border:0;
    }
    #width {
    min-width:500px;
    background-color: #EEEEFF;
    height: 300px;
    border: 1px solid #333333;
    }
    /* the bodge for IE6 browsers */
    * html #minwidth {border-left:500px solid #fff; position:relative; float:left; z-index:1;}
    * html #container {margin-left:-500px; position:relative; float:left; z-index:2;}
    #normal {
    background-color: #AAAAFF;
    height: 30px;
    }
    #oversize_container {
    background-color: #AAFFAA;
    height: 50px;
    }
    #oversize {
    background-color: #66FF66;
    height: 30px;
    width: 500px;
    }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    	<div id="minwidth">
    		<div id="container">
    			<div id="normal">normal div</div>
    			<div id="oversize_container">
    				<div id="oversize">the oversize div</div>
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    One more suggestion. If you aren't going to pass your XHTML1.1 as application/xhtml+xml then don't bother using it. It shouldn't be passed as text/html. XHTML1.0 allows it to be text/html but then you might as well use HTML4.01 Strict.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Ok,

    I see you're using a more advanced version of the IE-minwidth I came up with today, (put something in the div with a width of your minwidth).

    The main issue I'm having is for small browser sizes. For example, load up that page I sent, or the page you sent back. Resize your browser so it's narrower than 500px, and then use the horizontal scrollbar to look over at the side. See how the only colour left is the div with the set width? I want to avoid that and have all the divs expand to be as wide as the 'minwidth' div.

    I know it's an odd request, but I have been asked to code a page that was designed for 1024-pixel wide screens. I'd like to make it so that it's still sort of useable for 800-pixel wide screens using the horizontal scrollbar.
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then don't set the width on any div.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    That would be great! Unfortunately the site's being done for someone else who requires space for a 768x90 banner in the header, and their logo, which means that even on a 1024 by 768 display unless you've got the window maximized the ad sticks out.

    I was hoping to come up with an easy solution but I'm starting to be convinced it's not possible, (believe me, I tried a lot of things before posting here, and thought it would make an interesting discussion).

    I guess I'll just have to be happy with setting the min-width, (and/or some IE6 fake min-width), to a width that accomodates the ad and not worry about other stuff sticking out.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #8
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Ok, I'm applying your min-width technique to the header I'm working on and have run into something interesting. When I set the fake min-width to values approaching (and exceeding) 1000px the page starts to disappear to the left. Not like horizontal scrolling, just everything is shifted to the left, and out of the screen. Have you run into this before?
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No. I haven't. Give us a link or post the code you are working with. We prefer the link.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Link here:

    http://www.johnbeales.com/demos/elitefitness

    I'm limited to a 1024x768 screen, and am wondering if that may have something to do with it, but if you'd check it out that would be great.
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If you are wanting to accommodate to the 800x600 res as well then why have such a large min-width? I don't think you understood how the min-width hack worked. It requires those two extra divs. #width for browsers that understand min-width, #minwidth, and #container.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    The reason for the wide min-width is because I am, (unfortunately), not the designer on this project. I just have to put the design into code, and I don't want my code to break for the users who still have 800x600 screens.

    I tried adding the extra div and still lost some of the page off to the left.

    I took a look around and found that IE has its own way to deal with this too:
    Code:
    <style type="text/css">
    #container {
    width: expression(document.body.clientWidth < 989? "987px": auto);
    }
    </style>
    I'm thinking I'll just wrap that in some IE conditional comments and go from there.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com


  •  

    Posting Permissions

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