...

View Full Version : Div loses position when browser is resized...?



ArcadeBoy
02-26-2011, 08:53 PM
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 (http://www.littletincar.co.uk/es/index2.html)

Any assistance would be appreciated.

Adam

NoeG
02-26-2011, 09:45 PM
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

ArcadeBoy
02-26-2011, 10:04 PM
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



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


@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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum