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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    scaling DIVs to 100% not working on browser

    I am a CSS newbie and working on a layout that is giving me trouble.

    What I am trying to do is create a page with several horizontally scaled DIVs that contain background textures and navigation and a fixed width div "fixedWidth1" that holds the page's main content. I want the scalable DIVs to completely fill the browser so when the page is viewed on different monitor resolutions, there are no gaps on the sides.

    This is what I came up with:

    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=ISO-8859-1" />
    <title>DIV sizing test</title>
    <style type="text/css">
    <!--
    html, body {
    	width: 100%;
    	height: 100%;
    }
    #banner, #middle, #footer{
    	width:100%
    }
    #banner{
    	position: absolute;
    	left: 0px;
    	right: 0px;
    	top: 0px;
    	height: 100px;
    	background-color:#CC9900;
    }
    #middle{
    	position: absolute;
    	left: 0px;
    	right: 0px;
    	top: 100px;
    	height: 500px;
    	background-color: #006666;
    }
    #fixedWidth1{
    	background-color: #CCCCCC;
    	width:800px;
    	height:500px;
    }
    #footer{
    	position: absolute;
    	left: 0px;
    	right: 0px;
    	top: 600px;
    	background-color: #663300;
    	height:100%;
    }
    .text{
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	font-weight:bold;
    }
    -->
    </style>
    </head>
    <body>
    <div id="banner" class="text" align="center">Banner (width=100%)
    </div>
    <div id="middle" align="center">
    	<div id="fixedWidth1" class="text" >
    		This is a fixed width div (width=800px)...
    	</div>
    </div>
    <div id="footer" class="text" align="center">
    	Footer (width=100%)</div>
    </body>
    </html>
    you can view the page at http://www.elmerjimenez.com/DIVScaling-test.html

    I have two problems that I can't get around.

    1) I set the DIVs width to 100% but, when I open this page in a browser, and rescale the window to a size smaller than the "fixedWidth1" div (the fixed width is 800px, so try rescaling to say, 500px wide) I get scroll bars and when I scroll sideways (to the right) I end up with "holes" on the right. I mean areas showing that the dynamic DIVs are not filling the window. The DIVs are not scaling when the browser is resized, but I don't want to get rid of the scroll bars, just in case somebody has to view this page on a small monitor.

    2) I want the footer to fill in the bottom of the page at large monitor resolutions, but setting the height of the footer to 100% simply makes the footer outrageously tall.

    ps. Sorry about the ugly colors, this is a test layout.

    Anybody has any suggestions on how to get around this problem?
    Thanks to anybody who could provide some insight into what I am doing wrong.

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this code:

    Code:
    body 
    {
    	background-color: #000000;
    	margin: 0;
    	padding: 0;
    }
    #wrap
    {
    	background-color: Blue;
    	width: 100%;
    }
    #header
    {
    	float: left;
    	background-color: White;
    	width: 100%;
    }
    #bodyWrap
    {
    	background-color: Green;
    	float: left;
    	clear: left;
    	width: 100%;
    }
    #fixedBody
    {
    	background-color: Purple;
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #footer
    {
    	clear: left;
    	float: left;
    	background-color: Red;
    	width: 100%;
    }
    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 runat="server">
        <title>Untitled Page</title>
        <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrap">
            <div id="header">
                HEADER GOES HERE
            </div>
            
            <div id="bodyWrap">
                <div id="fixedBody">
                    FIXED BODY GOES HERE
                </div>
            </div>
            
            <div id="footer">
                FOOTER GOES HERE
            </div>
        </div>
        </form>
    </body>
    </html>
    When you resize the browser window, your fluid divs are going to resize too, however the fixed width div will remain the same width. So when you scroll over, the header and footer won't span all the way across the page.

    This is a problem that occurs when you mix fixed and fluid layouts like this.

    What you can do is change the width of the "fixedBody" div to say 60%. This will allow it to resize aswell when the window is resized.

    What you can do aswell if you want the footer to appear as though it is filling in the entire bottom of the page, is change the background-color of the body to the same colour as your footer.

    The reason why the footer looks so tall when you set the height to 100% is because it takes 100% of your screen resolution and gives it that height in pixels. As far as I know, there is no possible way (without using javascript) to make the footer fill the rest of page, because your content will make the page change height based on the width of the screen.

    I would also recommended using floated positioning (like I did in this example) when working with fluid layouts, because they are easier to work with, use less code, and absolute positioned elements don't take up space on the page.

    I hope this helps, let me know if I didn't answer your question.


    Nick.

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Hi Nick, thanks for taking the time to read and reply to my post. I like your suggestions, specially the one about the footer. I think I am going to do what you suggest. [I'm still learning as I go].

    Unfortunately your suggestion for the first problem seems to be having the same problem that I was having initially. The fluid divs are not completely scaling to fill the browser after one resizes the window. I took a screen grab to show what's going on. Here it is http://www.elmerjimenez.com/ScalingIssue.jpg. I also posted your file at http://www.elmerjimenez.com/CodingForumsReply1.html so you can see your file in action.

    Here's an easy way to see the problem:

    1. Open the file on any browser
    2. Scale the browser to something relatively narrow like 600 px wide (narrower than the fixed width div). You'll see the scroll bar at the bottom.
    3. Scroll to the right. You'll see that the variable width divs are not filling in the space to the right side, essentially leaving an unsightly hole.

    I realize that this only happens when somebody resizes their browser window, but I don't want to chance it since it will be viewed at different screen resolutions.
    Any thoughts?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying to make something like http://bonrouge.com/3c-hf-fluid.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks abduraooft for your reply. I'm not using any of those layouts, but there are some good ideas there. I think the way I ended up fixing the problem was by adding min-width and max-width parameters to my divs. That seemed to fix the problem I was having.

    The code added was:

    Code:
    #banner, #middle, #footer{/*This parameters set minimum and maximum width for the liquid divs*/
    	min-width:800px;
    	width:100%;
    	max-width:200%;
    }
    This is good way to control how my divs stretch at different monitor resolutions.

    Note: If anybody is interested, I found this idea at http://stackoverflow.com/questions/3...r-float-layout and it seemed pretty close to what I have been trying to accomplish. Thank you CF.

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey captainpixels, The min- and max- attributes are great for solving this problem. Be careful mixing % and px for the two, you could get some strange results. Also, IE6 and below does not support min- and max-, so if someone is using that browser, your fixed div will full contract and full expand based on the resolution.

    If you use the min- and max- in your header and footer aswell, then you won't get that gap when the browser is smaller than 800px.

    Is this what you wish to accomplish?

    http://www.technologyinnovations.ca/...r/Default.aspx

    Here is the code:

    STYLESHEET
    Code:
    body 
    {
    	background-color: #000000;
    	margin: 0;
    	padding: 0;
    }
    #wrap
    {
    	background-color: Blue;
    	width: 100%;
    }
    #header
    {
    	float: left;
    	background-color: White;
    	width: 100%;
    	height: 100px; /*Not Required*/
    	min-width: 800px; /*Not supported in IE6 & below */
    }
    #bodyWrap
    {
    	background-color: Green;
    	float: left;
    	clear: left;
    	width: 100%;
    	height: 400px; /*Not Required*/
    }
    #fixedBody
    {
    	background-color: Purple;
    	width: 60%;
    	margin-left: auto;
    	margin-right: auto;
    	height: 400px; /*Not Required*/
    	min-width: 800px; /*Not supported in IE6 & below */
    }
    #footer
    {
    	clear: left;
    	float: left;
    	background-color: Red;
    	width: 100%;
    	height: 100px; /*Not Required*/
    	min-width: 800px; /*Not supported in IE6 & below */
    }

    HTML
    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 runat="server">
        <title>Untitled Page</title>
        <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrap">
            <div id="header">
                HEADER GOES HERE
            </div>
            
            <div id="bodyWrap">
                <div id="fixedBody">
                    FIXED BODY GOES HERE
                </div>
            </div>
            
            <div id="footer">
                FOOTER GOES HERE
            </div>
        </div>
        </form>
    </body>
    </html>

    Nick.


  •  

    Posting Permissions

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