...

View Full Version : Div doesn't stretch/overflow:visible doesnt work



omar_391
11-11-2009, 04:03 PM
I think title sud explain my problem..
i tried sooo.. many ways but no hope from google :(

Now html 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 ...:confused:

Excavator
11-11-2009, 04:37 PM
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 -
<!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

omar_391
11-11-2009, 05:04 PM
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:



<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..

Excavator
11-11-2009, 05:19 PM
If you put floats inside your #bg2, you will need to clear them. Adding overflow:auto; will usually do that -

#bg2{
position:relative;
background: #CCC url(2.gif) repeat-y;
width:944px;
overflow: auto;
}
see this explanation (http://www.quirksmode.org/css/clearing.html)

omar_391
11-12-2009, 03:30 PM
I dont know yet overflow: auto; doesnt work too.

:confused:

Excavator
11-12-2009, 04:04 PM
<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. (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)

Try it like this:
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum