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 Coder
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Unhappy Div doesn't stretch/overflow:visible doesnt work

    I think title sud explain my problem..
    i tried sooo.. many ways but no hope from google

    Now html code:

    Code:
    <html>
    <head>
    <style>
    *{margin:0px;padding:0px;}
    
    #main{
    position:relative;
    width:100%;
    background: url('main.gif') repeat-x;
    height:768px;
    }
    
    
    #foot{
    
    position:relative;
    left:0px;
    top:100px;
    background: url('last.gif') repeat-x;
    width:100%;
    height:100px;
    
    }
    
    #container{
    position:absolute;
    width:944px;
    left:50%;
    margin-left:-472px;
    
    }
    
    #bg1{
    position:relative;
    background: url('1.gif') no-repeat;
    height:22px;
    width:943px;
    }
    
    #bg2{
    position:relative;
    background: url('2.gif') repeat-y;
    width:943px;
    ----------------------------->>overflow:visible; doesnt work :(
    }
    
    #bg3{
    position:relative;
    background: url('3.gif') no-repeat;
    height:22px;
    width:943px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="main">
    <div id="container">
    <div id="bg1"></div>
    <div id="bg2">
    
    <!---container-start--->
    //this is where my all page content goes anlog with other divs,images etc.
    //but overflowed without stretching the div..
    
    </div>
    <div id="bg3"></div></div>
    </div>
    
    <div id="foot"></div>
    </body>
    </html>
    dont get a clue what sud i do ...
    Last edited by omar_391; 11-11-2009 at 04:13 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello omar_391,
    I changed a few things but, as far as I could tell, your original code worked too.
    Try it like this and see if you like it -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #000;
    }
    *{margin:0px;padding:0px;}
    #main{
    	position:relative;
    	width:100%;
    	background: url('main.gif') repeat-x;
    	height:768px;
    }
    #container{
    	width:944px;
    	margin: 50px auto 0;
    }
    	#bg1{
    		position:relative;
    		background: #C60 url(1.gif) no-repeat;
    		height:22px;
    		width:944px;
    	}
    	#bg2{
    		position:relative;
    		background: #CCC url(2.gif) repeat-y;
    		width:944px;
    	}
    	#bg3{
    		position:relative;
    		background: #F99 url(3.gif) no-repeat;
    		height:22px;
    		width:944px;
    	}
    #foot{
    	position:relative;
    	left:0px;
    	top:100px;
    	background: #99C url(last.gif) repeat-x;
    	width:100%;
    	height:100px;
    }
    </style>
    </head>
    <body>
    <div id="main">
    <div id="container">
    <div id="bg1"></div>
        <div id="bg2">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
        <!--end bg2--></div>
    <div id="bg3"></div></div>
    </div>
    <div id="foot"></div>
    </body>
    </html>
    It looks like your trying for a full-height layout? One where the footer is at the bottom of the viewport even when there is not enough content to push it down there.
    Have a look at this demo - http://nopeople.com/CSS/full-height-layout/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I changed a few things but, as far as I could tell, your original code worked too.
    Try it like this and see if you like it .....

    It looks like your trying for a full-height layout?
    Thanks Excavator, U r right, it is full-height single column layout.

    But my concern is not here,but is in--->

    when i put any or other DIV content inside id="bg2" div then it breaks the bg2 div and overflows.
    Yes other internal div s have floating elements but {clear:both;} fix doesnt work.

    or an example:

    Code:
    <div id="bg2">
    <!---container-start--->
    
    <div style="position:absolute;width:860px;left:30px;"><div style="some background img,float:left;"></div><div style="some bckground img,float:right;"></div></div>
    
    //other homogeneous div content
    //all breaks out of bg2 :(
    
    <!--bg2 end--></div>
    so actually i need two things to b precise:

    1.dynamically stretching 'bg2' div
    2.all content stays inside bg2.

    thanks for ur kind help..
    Last edited by omar_391; 11-11-2009 at 05:07 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    If you put floats inside your #bg2, you will need to clear them. Adding overflow:auto; will usually do that -
    Code:
    	#bg2{
    		position:relative;
    		background: #CCC url(2.gif) repeat-y;
    		width:944px;
    overflow: auto;
    	}
    see this explanation
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I dont know yet overflow: auto; doesnt work too.


  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by omar_391 View Post
    Code:
    <div id="bg2">
    <!---container-start--->
    
    <div style="position:absolute;width:860px;left:30px;"><div style="some background img,float:left;"></div><div style="some bckground img,float:right;"></div></div>
    
    //other homogeneous div content
    //all breaks out of bg2 :(
    
    <!--bg2 end--></div>
    ..
    Your putting an absolute positioned element in there and expecting #bg2 to react to it like a normal element. Using ap takes that element out of the normal flow of the document. Have a quick look at the pitfalls of absolute positioning.

    Try it like this:
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #000;
    }
    *{margin:0px;padding:0px;}
    #main{
    	position:relative;
    	width:100%;
    	background: url('main.gif') repeat-x;
    	height:768px;
    }
    #container{
    	width:944px;
    	margin: 50px auto 0;
    }
    	#bg1{
    		position:relative;
    		background: #C60 url(1.gif) no-repeat;
    		height:22px;
    		width:944px;
    	}
    	#bg2{
    		position:relative;
    		background: #CCC url(2.gif) repeat-y;
    		width:944px;
    	}
    	#bg3{
    		position:relative;
    		background: #F99 url(3.gif) no-repeat;
    		height:22px;
    		width:944px;
    	}
    #foot{
    	position:relative;
    	left:0px;
    	top:100px;
    	background: #99C url(last.gif) repeat-x;
    	width:100%;
    	height:100px;
    }
    </style>
    </head>
    <body>
    <div id="main">
    <div id="container">
    <div id="bg1"></div>
        <div id="bg2">
    <!---container-start--->
    
    <div style="width:860px;background:#fff;overflow:auto;">
    <div style="width:300px;height:300px;background:#FF0;float:left;"></div>
    <div style="background:#000;width:400px;height:100px;float:right;"></div>
    </div>
    //other homogeneous div content
    //all breaks out of bg2 :(
    
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
        <!--end bg2--></div>
    <div id="bg3"></div></div>
    </div>
    <div id="foot"></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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