propblem with overflow

@scragarOct 06.2007 — #I should think tht giving both divs position: relative and then height: 100% should work, although I must say that this is untested.

@k0r54authorOct 06.2007 — #Sorry no luck??

Code is as follows

CSS:-

[CODE]
 @charset "utf-8";
 /* CSS Document */
 
 body {
 margin:0;
 height:100%;
 background:#DCD7BC;
 }
 
 #container {
 width:1000px;
 margin:0 auto;
 height:100%;
 position:relative;
 }
 
 #header {
 width:100%;
 height:316px;
 background:url(../images/h_back.jpg) no-repeat right;
 position:relative;
 }
 
 #content-container {
 background:url(../images/m_back.jpg) repeat-x left;
 height:100%;
 position:relative;
 }
 
 #content-left {
 width:41px;
 float:left;
 background:url(../images/b_back1.jpg) no-repeat left top;
 min-height:417px;
 height:100%; 

 position:relative;
 }
 
 #content-main-container {
 width:934px;
 float:left;
 height:100% auto;
 min-height:417px;
 position:relative;
 }
 
 #content-main-left-container {
 width:203px;
 height:100%;
 min-height:417px;
 float:left; 

 background:url(../images/l_back.gif) repeat left top;
 position:relative;
 }
 
 #content-main-left-psearch {
 background:url(../images/s_back.jpg) no-repeat left top;
 height:351px;
 position:relative;
 }
 
 #content-main-left-content {
 margin-top:10px;
 border:1px solid #9e977b;
 width:201px;
 position:relative;
 }
 
 #content-main-middle-container {
 width:731px;
 float:left;
 min-height:417px;
 background:url(../images/middle_back.jpg);
 position:relative;
 }
 
 #content-main-middle-menu {
 background:url(../images/m_menubg.jpg) repeat-y left;
 height:48px;
 width:731px;
 float:left;
 position:relative;
 }
 
 #content-main-middle-content {
 width:707px;
 float:left;
 padding:5px 5px 5px 19px;
 position:relative;
 }
 
 #content-right {
 width:25px;
 float:left;
 background:url(../images/b_back2.jpg) no-repeat right top;
 min-height:417px;
 position:relative;
 }
 
 #footer {
 width:100%;
 height:164px;
 background:url(../images/f_back.jpg) no-repeat right;
 float:left;
 position:relative;
 }
 [/CODE]

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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <link href="css/layout.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
 <!--
 function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
 }
 function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
 }
 
 function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
 }
 
 function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
 }
 //-->
 </script>
 </head>
 
 <body onload="MM_preloadImages('images/2h_butt1.jpg')">
 <div id="container">
 
 <div id="header">  </div>
 
 <div id="content-container">
 <div id="content-left"></div>
 <div id="content-main-container">
 
   <div id="content-main-left-container">
   <div id="content-main-left-psearch"><p>&nbsp;</p></div> 
   <div id="content-main-left-content"><p>Well</p>test<p></div>
   </div>
 
   <div id="content-main-middle-container">
   <div id="content-main-middle-menu">
   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button1','','images/2h_butt1.jpg',1)"><img src="images/h_butt1.jpg" name="button1" width="112" height="48" border="0" id="button1" /></a>
   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button2','','images/2h_butt1.jpg',1)"><img src="images/h_butt1.jpg" name="button2" width="112" height="48" border="0" id="button2" /></a>
   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button3','','images/2h_butt1.jpg',1)"><img src="images/h_butt1.jpg" name="button3" width="112" height="48" border="0" id="button3" /></a>
   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button4','','images/2h_butt1.jpg',1)"><img src="images/h_butt1.jpg" name="button4" width="112" height="48" border="0" id="button4" /></a>
   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button5','','images/2h_butt1.jpg',1)"><img src="images/h_butt1.jpg" name="button5" width="112" height="48" border="0" id="button5" /></a>
   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button6','','images/2h_butt1.jpg',1)"><img src="images/h_butt1.jpg" name="button6" width="112" height="48" border="0" id="button6" /></a>        </div>
 
   <div id="content-main-middle-content"><p>Well</p>test<p><p>Well</p>test<p><p>Well</p>test<p><p>Well</p>test<p><p>Well</p>test<p><p>Well</p>test<p></div>
   </div>
  </div>
  <div id="content-right"></div>
 </div>
 
 <div id="footer">
 <p>&nbsp;</p>
 </div>
 </div>
 </body>
 </html>
 [/CODE]

Thanks

k0r54

@scragarOct 06.2007 — #ok, it has to be done with height: inherit and a containing element, however that appears to cause problems if the height of the container is not explicit(intrestingly height: 100% with negative margins to fix things for the container and other two works. sounds like a big work around though, I'm gonna try to find a cleaner solution.

@k0r54authorOct 08.2007 — #Hi,

I have been fiddling but still no luck, any ideas?

thanks

k0r54

@wietekeOct 08.2007 — #try this one.

put this in your left{} padding-bottom:900px; margin-bottom:-900px;

your footer will shift to the left then but you can fix that by adding clear:both; to the footer. I hope it is going to work.

propblem with overflow

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

propblem with overflow

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴