Overlapping problems!

@le007Jan 21.2007

Hi all,
can someone tell me is there a property that won’t cause this affect:

When I resize the window from maximum to say 1/3 of the page (just to test) for both vertical and horizontal height the actual window will have scrollers where as the div’s will remain the same and not overlap eachother, get smaller or go beneath eachother?
I’ve tried visible, hidden and scroll – with overflow but they don’t work.
Thanks

to post a comment

CSS

7 Comments(s) _↴

@CentauriJan 22.2007 — #Not sure I follow .... exactly what behaviour DO you want from the divs when resizing the window?

Cheers

Graeme

@drhowarddrfineJan 22.2007 — #If your divs are getting smaller then it's because you are sizing them using ems or percent. If you don't want them changed then use px.

@le007authorJan 22.2007 — #Hi Graeme,

I've set body overflow:auto

I want the div's the remain the same as if the website was designed using tables. For some reason they're overlapping and resizing themselves.

Thanks

@CentauriJan 22.2007 — #If the divs are resizing, then they don't have fixed sizes set. If they are overlapping, it probably means they have absolute positioning with percentage position units.

It would be difficult to "accidently" achieve the wrong page behaviour when starting a design from scratch - I presume you are trying to modify an existing design that doesn't work the way you prefer?

Cheers

Graeme

PS: got any code for this, or a tempory site?

@le007authorJan 23.2007 — #My Server doesn't support php... plz check out firstly css file, then index.php, left.php, middle.php and right.php

Thanks!

body{
  text-align:center;
  font-family:arial,helvetica,geneva,sans-serif;
  height:100%;
  margin-top: 0px;
  margin-bottom: 0px;
  width:100%;
  background-image: URL("bg.gif");
  overflow:auto;
 
  }
 
  #mast, #footer,#main{
  text-align:left;
  margin:auto;
  }
 
  #mast{
  width:90%;
  padding:0px;
  border-style: solid;
  border-color:white;
  border-top-width : 3px; 
  border-right-width : 3px;
  border-left-width : 3px;
   border-bottom-width:0px;
  }
 
  #main{
  width:90%;
  height:auto;
  overflow:auto;
  background:#cfbfcf;
  border-style: solid;
  border-color:white;
  border-top-width : 0px; 
  border-right-width : 3px;
  border-left-width : 3px;
   border-bottom-width:0px;
  padding-bottom:5px;
  }
 
  #left{
  width:15%;
  float:left;
  background:#cfbfcf;
  height:auto;
  margin:5px;
  }
 
  #middle{
  width:64%;
  float:left;
  background:white;
  margin-top: 5px;
  margin-right:0px;
  }
 
  #right{
  width:17%; /*some versions of IE will force a 20% width to the second line*/
  float:right;
  height:80%;
  margin: 0px;
  margin-top: 5px;
  margin-right:0px;
  margin-left:0px;
  }
 
  #footer{
  width:90%;
  background:#003466;
  clear:both;
  height: auto;
  border-style: solid;
  border-color:white;
  border-top-width : 0px; 
  border-right-width : 3px;
  border-left-width : 3px;
   border-bottom-width:3px;

}

.maint{
  width:90%;
  background:#cfbfcf;
  border-style: solid;
  border-color:white;
  border-top-width : 3px; 
  border-right-width : 3px;
  border-left-width : 3px;
   border-bottom-width:0px;

}

.tables{
  text-align:left;margin-top:0px;border:1px;border-style: dotted;border-spacing:0px;padding:0px;border-color:#650066;color:#650066;

border-top-width : 0pt; border-right-width : 0pt;border-left-width : 0pt; border-bottom-width : thin;

}

.feat{
  text-align:left;margin-top:0px;border:1px;border-style: dotted;border-spacing:0px;padding:0px;border-color:#650066;color:#650066;

border-top-width : 1pt; border-right-width : 1pt;border-left-width : 1pt; border-bottom-width : 1pt thin;

}

A:link {

COLOR: #650066; TEXT-DECORATION: none

}

A:active {

COLOR: #650066; TEXT-DECORATION: none

}

A:visited {

COLOR: #650066; TEXT-DECORATION: none

}

A:hover {

COLOR: white; TEXT-DECORATION: underline

}

--------------------------------------

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<link rel="stylesheet" type="text/css" href="cp.css"/>

</script>

</head>

<body onLoad="runSlideShow()">

<div id="mast">

<TABLE borderColor=white cellSpacing=0 cellPadding=3 width=100% bgColor=#650066>

<TBODY>

<TR>

<TD style="text-align:left;

border:1px;

border-style: solid;

padding:2px;

color:white;

border-top-width : 0pt;

border-right-width : 2pt;

border-left-width : 0pt;

border-bottom-width : 2pt;">

<FONT face=Copperplate32bc color=white size=1> WELCOME</FONT></TD>

<TD width=220 style="text-align:left;

border:1px;

border-style: solid;

padding:2px;

color:white;

border-top-width : 0pt;

border-right-width : 0pt;

border-left-width : 0pt;

border-bottom-width : 2pt;">

<CENTER><FONT face=Copperplate32bc color=white size=1>TODAY IS

</FONT></CENTER></TD></TR></TBODY></TABLE>
<TABLE borderColor=WHITE cellSpacing=0 cellPadding=0 width=100% bgColor=#003466 border=0>

<TBODY>

<TR>

<td bgcolor=#003466 style="text-align:left;

margin-top:0px;

border:1px;

border-style: solid;

border-spacing:0px;

padding:0px;

color:white;

border-top-width : 0pt;

border-right-width : 0pt;

border-left-width : 0pt;

border-bottom-width : 0pt;">

<font face=arial size=4 color=white>Hello

</tr>

</table>

</div>

<div id="main">

<div id="left"><hr width=85% align=left color="#650066">

<?php include("left.php"); ?>

</div>

<div id="middle">

<?php

/* Roddefig's index.php script (generic demo) */

$location=$_GET['location'];

$v_id=$_GET['id'];

if (empty($location)) { $location='index';

} changelocation($location);

function changelocation($location)

{

switch ($location)
  {
  case 'index': include ('middle.php'); 
   break; 
  case 'search': include ('search.php'); 
   break; 
  case 'aboutus': include ('about.php'); 
   break; 
  case 'contact': include ('contact.php'); 
   break; 
  }

}

?>

</div>

<div id="right">

<?php include("right.php"); ?>

</div>

</div>

<div id="footer">

Footer div

</div>

</body>

</html>
-----------------------------------

left.php

<table cellspacing="0" cellpadding="0" width=85%>

<tr>
  <td class="tables"><li><a href="index.php?location=index"><font size=2 face="arial"><B>Home</a></td>
  </tr>
 
  <tr>
  <td class="tables"><li><a href="index.php?location=search"><font size=2 face="arial"><B>Search</a></td>
  </tr>
 
  <tr>
  <td class="tables"><li><a href="index.php?location=menu"><font size=2 face="arial"><B>Menu</a></td>
  </tr>
 
 
  <tr>
  <td class="tables"><li><a href="index.php?location=aboutus"><font size=2 face="arial"><B>About Us</a></td>
  </tr>
 
  <tr>
  <td class="tables"><li><a href="index.php?location=contact"><font size=2 face="arial"><B>Contact Us</a></td>
  </tr>

</table>

<br>

---------------------
middle.php

<br>

<center>

<hr width="90%" color="#650066">

<table cellspacing="5%" cellpadding="10%" class="feat" width="65%">

<tr>

<td>

<center>

<form name="form1">

<br>

<br>

<select name="select1" size="1" style="background-color:#CFBFCF;width:95%;">

<option selected type="hidden">Choose option 1</option>

</select>

<br><br>

<select name="select1" size="1" style="background-color:#CFBFCF;width:95%;">

<option selected type="hidden">option 2</option>

</select>

<br><br>

<select name="select1" size="1" style="background-color:#CFBFCF;width:95%;">

<option selected type="hidden">option 3</option>

</select>

<br>

<br>

<input type="button" value="Search"><br>

</form>

</td>

<td colspan="2" valign="top">

<center>

<font size=3 face="arial" color="#650066"><b>

SEARCH

</table>

<br>

<hr width="90%" color="#650066">

<table cellspacing="5" cellpadding="0" class="feat" width="65%">

<tr>

<td>

Cool

</td>

</tr>

</table>

</center>
--------------------

right.php

<table cellspacing="0" cellpadding="0" width="100%" bgcolor="green">

<td>

Right

Div

</td>

</table>

@CentauriJan 23.2007 — #Well, all your divs are being defined as percentage widths, so they WILL resize - you will need to set fixed widths to get the effect you are looking for.

And get rid of the other tables - they are NOT required and can mess up your layout.

Cheers

Graeme

@le007authorJan 23.2007 — #Fixed widths? I never got to grips with absolute/relative positioning! Fixed as in pixels is it? Sorry bout the trouble buddy... I REALLY appreciate the help cos this prob is annoying! Thanks

Also in #CSS _↴

CSS help needed please.Horizontally scrollable div Works...but must be a better way?

Success!

Help @le007 spread the word by sharing this article on Twitter...

Tweet This

Overlapping problems!

7 Comments(s) _↴

</html>
-----------------------------------

</center>
--------------------

Also in #CSS _↴

Success!

Social

Version

Overlapping problems!

7 Comments(s) ↴

</html> -----------------------------------

</center> --------------------

Also in #CSS ↴

Success!

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

Social

Version

7 Comments(s) _↴

</html>
-----------------------------------

</center>
--------------------

Also in #CSS _↴