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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div loses position when browser is resized...?

    Hi There,

    I am new to this forum, and have had a browse around but cannot find the answer i'm looking for!

    I am having an issue with a three column page layout that I am working on. I need the centre column to reach from the top of the page right to the bottom, which i have achieved using html and body 100% and using height:100% on the relevent divs.

    Unfortunately, the problem I am left with is this. When I preview the page in a browser (tested in Safari and Firefox) it displays absolutely fine but if I resize the browser window upwards and reduce the vertical page size, the right hand div and its contents shoot downwards and I get a scroll bar appear on the page.

    I just want the div to stay where it is. I have tried using overflow:hidden but then I lose the centre div top-to-bottom color that I want.

    Can anyone assist me?!!

    I have uploaded the page to my wifes hosting so you can look at it and hopefully assist

    PREVIEW

    Any assistance would be appreciated.

    Adam

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    hey arcadeboy, I think the problem ur having has something to do with the divs not clearing..overflow auto would only work if your three divs are contained inside a wrapper with the wrappers div set to overflow auto and the three divs floating either left or right if you do that you shouldn't have any problem..

    If you could provide the html/css of this document I could take a look and it'll help me help you better

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks NoeG,

    I have an overall wrap, then a div to contain the left and middle divs, then a final right div. The left and middle divs float left and the right one floats right. This all seems fine. I think the problem is being caused by me trying to force the middle column to be black from top to bottom. Anyway heres the code.... (I have removed the mailing list code as it is so long).

    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" />
    <link rel="stylesheet" type="text/css" href="style2.css"/>
    <title>Untitled Document</title>
    <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/mainlogocol.png')">
    
    <div id="wrap">
        
    <div id="leftmid">
    <div id="left">
    
    
    
    
    </div><!--left ENDS-->
            
    <div id="middle">
    <div id="banner"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/mainlogocol.png',1)"><img src="images/mainlogo.png" alt="Electric Skies Logo" name="Image1" width="369" height="53" border="0" id="Image1" /></a></div>
    
    <h1 align="center"><a href="#" class="music">MUSIC</a> / <a href="#" class="photo">PHOTO </a> / <a href="#" class="video">VIDEO </a> / <a href="#" class="info">INFO </a></h1>
    
    <div class="youtube">
    			<iframe title="YouTube video player" width="560" height="345" src="http://www.youtube.com/embed/SWR3zZQAYOI?rel=0" frameborder="0" allowfullscreen></iframe>		</div>
                
    
    
            
            
    </div><!--middle ENDS-->
    </div><!--leftmid ENDS-->
        
    
    
    <div id="right">
    
    <h1>MAILING LIST</h1>
    <p>Sign up below to join our mailing list</p>
    
    
    <h1>RECENT TWITTER</h1>
    <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
    <a href="http://twitter.com/electric_skies" id="twitter-link" style="display:block;text-align:right; color:#333; font-family:Arial, Helvetica, sans-serif; font-size:12px;">follow us on Twitter</a>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/electric_skies.json?callback=twitterCallback2&amp;count=6"></script>
    
    
        
    
    </div><!--right ENDS-->
    
    
    </div><!--wrap ENDs-->
    
    </body>
    </html>

    CSS

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * {
    	margin:0;
    	padding:0;
    	}
    
    html {
    	height:100%;
    	}
    
    body {
    	margin:0 auto;
    	padding:0;
    	height:100%;
    	background-color:#fff;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	}
    	
    	
    h1 {
    	margin:0 0 10px 0;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	}	
    	
    p {
    	margin:0 0 10px 0;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	}	
    	
    /*MAIN CONTAINER DIVS*/
    
    #wrap {
    	margin:0 auto;
    	padding:0;
    	width:1100px;
    	height:100%;
    	overflow:auto;
    }
    	
    #leftmid {
    	margin:0px;
    	padding:0px;
    	float:left;
    	width:850px;
    	height:100%;
    	overflow:auto;
    	}
    	
    #left {
    	margin:0px;
    	padding:103px 20px 0 0px;
    	float:left;
    	width:230px;
    	height:auto;
    	overflow:auto;
    	color:#666;
    	}
    	
    #middle {
    	margin:0px;
    	padding:0px 10px 0 10px;
    	float:right;
    	width:580px;
    	height:100%;
    	overflow:auto;
    	background-color:#000;
    	color:#fff;
    	}
    
    #right {
    	float:right;
    	margin:0px;
    	padding:103px 0 0 20px;
    	width:230px;
    	height:auto;
    	overflow:auto;
    	color:#666;
    	}
    	
    #banner {
    	margin:0 auto;
    	padding:10px 0 40px 0;
    	width:373px;
    	height:53px;
    	}
    	
    /* LINKS & HOVERS */
    
    a.music {
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFF;
    	font-size:14px;
    	text-decoration:none;
    	}
    	
    a.music:hover{
    	font-family:Arial, Helvetica, sans-serif;
    	color:#ff00bb;
    	font-size:14px;
    	text-decoration:none;
    	}
    
    a.photo {
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFF;
    	font-size:14px;
    	text-decoration:none;
    	}
    	
    a.photo:hover{
    	font-family:Arial, Helvetica, sans-serif;
    	color:#e9fc14;
    	font-size:14px;
    	text-decoration:none;
    	}
    
    a.video {
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFF;
    	font-size:14px;
    	text-decoration:none;
    	}
    	
    a.video:hover{
    	font-family:Arial, Helvetica, sans-serif;
    	color:#14fc3f;
    	font-size:14px;
    	text-decoration:none;
    	}
    	
    a.info {
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFF;
    	font-size:14px;
    	text-decoration:none;
    	}
    	
    a.info:hover{
    	font-family:Arial, Helvetica, sans-serif;
    	color:#1481fc;
    	font-size:14px;
    	text-decoration:none;
    	}	
    	
    
    /* MAILING LIST */
    
    #mc_embed_signup {
    	margin:0 0 100px 0;
    	padding:0;
    	color:#666;
    	}
    
    fieldset {
    	padding:0px;
    	font-size:11px;
    	border:0px;
    	}
    
    .mc-field-group {
    	padding:0 0 8px 0;
    	color:#333;
    	}
    	
    
    
    /*TWITTER*/
    
    #twitter_div {
    	margin:0 auto;
    	width: 230px;
    	height: auto;
    	overflow:auto;
    	color:#000;
    	}
    
    ul#twitter_update_list {
    	margin:0;
    	padding:0;
    	list-style: none;
    	font-size: 12px;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-style:italic;
    }
    ul#twitter_update_list li {
    	margin:0;
    	padding:0 0 15px 0;
    	color: #666;
    	background:#fff;
    }
    
    a { color: #ff00bb;
    	text-decoration:none; }
    	
    #footer {
    	clear:both;
    	margin:0;
    	padding:0;
    	width:1100px;
    	height:50px;
    	background-color:#999;
    	}
    	
    .youtube {
    	margin:0 auto;
    	padding:20px 0 10px 0;
    	
    	width:560px;
    	height:375px;
    	}


    Thanks again!


  •  

    Posting Permissions

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