Positioning Divs... 3

acent · Apr 14, 2008

Hello all,

I'm trying to position some Divs relative to eachother and also relative to some divs that are a parent's sibling's children. In other words, consider the following:

Code:

<div id="1">
  <div id="2"></div>
</div>
<div id="3">
  <div id="4"></div>
  <div id="5"></div>
</div>

Div 2 is overlapping div 3. Therefore, what I'm trying to do is have div 5 to the right of 4, and 4 to the right of 2. That was a fun trip into the hypothetical world, which none of us live in, so here's the actual code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
    <title>Untitled Page</title>
</head>
<body>
{literal}
<style>
.hourTitle {
  float: left;
  width: 30px;
  height: 84px;
  text-align: center;
  font-weight: bold;
  background-color: #5f7279;
  color: #FFFFFF;
}
.hourContent {
  height: 20px;
  width: 520px;
  background-color: #FFFFFF;
  border-right: 1px solid #5f7279;
  border-bottom: 1px dotted #5f7279;
}
.lastHourContent {
  height: 20px;
  width: 520px;
  background-color: #FFFFFF;
  border-right: 1px solid #5f7279;
  border-bottom: 1px solid #5f7279;
}
.aptBox {
  float: left;
  height: 0px;
  width: 1%;
  overflow: hidden;
  position: relative;
}
.quickFillBox {
  width: 255px;
  overflow: hidden;
  background-color: #FFFFFF;
  border: 1px solid #5f7279;
  padding: 5px;
  position: absolute;
  z-index: 99;
  left: 0px;
  top: 0px;
}
.labelBox {
  float: left;
  width: 75px;
  padding-top: 2px;
  padding-bottom: 2px;
  overflow: hidden;
}
.contentBox {
  width: 170px;
  padding-top: 2px;
  padding-bottom: 2px;
  overflow: hidden;
}
input, select, div {
  color: #000000;
}
.clearDiv {
  clear: both;
  font-weight: bold;
}
</style>
{/literal}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5"><img src="/images/profile_28.gif" width="5" height="28" alt=""></td>
    <td width="99%" height="28" background="/images/profile_30.gif">
      <table width="100%" border="0" cellspacing="0" cellpadding="2">
        <tr>
          <td width="13">&nbsp;</td>
          <td nowrap><strong>Calendar :: One Day</strong></td>
          <td width="715">&nbsp;</td>
          <td width="308" align="right">&nbsp;</td>
        </tr>
      </table>
    </td>
    <td width="5"><img src="/images/profile_32.gif" width="5" height="28" alt=""></td>
  </tr>
  <tr>
    <td valign="top" background="/images/profile_34.gif"><img src="/images/profile_34.gif" width="5" height="19" alt=""></td>
    <td>
      <div id="workingHours">
        <div class="clearDiv">Your appointments for today are listed below. To add an appointment, click on the hour of your appointment and fill out pertinent details.</div>
        <div class="clearDiv"></div>
        <div style="width: 552px; background-color: #5f7279;">
          <div style="text-indent: 15px; color: white;">Month Day</div>
          <div style="float: left; width: 15px; height: 60px; background-color: #5f7279;">&nbsp;</div>
          <div style="float: left; width: 520px; height: 20px; background-color: #FF0000; color: white; position: relative;">Reminders</div>
          <div style="float: left; width: 520px; height: 20px; background-color: #00FF00; color: white; position: relative;">Reminders</div>
          <div style="float: left; width: 520px; height: 20px; background-color: #0000FF; color: white; position: relative;">Reminders</div>
          <div class="clearDiv"></div>
          <div style="width: 200px; height: 5px; overflow: hidden;">&nbsp;</div>
        </div>
       
      </div>
    </td>
    <td valign="top" background="/images/profile_36.gif"><img src="/images/profile_36.gif" width="5" height="42" alt=""></td>
  </tr>
  <tr>
    <td><img src="/images/profile_44.gif" width="5" height="6" alt=""></td>
    <td background="/images/profile_47.gif"><img src="/images/profile_47.gif" width="152" height="6" alt=""></td>
    <td><img src="/images/profile_48.gif" width="5" height="6" alt=""></td>
  </tr>
</table>

<div id="quickFill" class="quickFillBox">
  <div class="clearDiv">
    <div class="labelBox" style="float: left; width: 170px;">Quick Enter Appointment</div><div class="contentBox"style="width: 75px; text-align: right;"><a href="#" onclick="closeQuickFill();">Close</a></div>
  </div>
  <div class="labelBox">Date</div>
  <div class="contentBox" id="quickFillBox.date">&nbsp;</div>
  <div class="labelBox">Start Time</div>
  <div class="contentBox" id="quickFillBox.startTime">&nbsp;</div>
  <div class="labelBox">Duation</div>
  <div class="contentBox"><input type="text" id="duration" name="duration" maxlength="6" size="8" /> Hours</div>
  <div class="labelBox">Publicity</div>
  <div class="contentBox"><select name="publicity"><option>Public</option><option>Private</option></select></div>
  <div class="labelBox">Subject</div>
  <div class="contentBox"><input type="text" id="subject" name="subject" /></div>
  <div class="labelBox">Description</div>
  <div class="contentBox"><textarea id="description" name="description" rows="3"></textarea></div>
  <div class="labelBox">&nbsp;</div>
  <div class="contentBox"><input type="button" value="save" class="lifebutton" onclick="closeQuickFill();" /></div>
  <div class="clearDiv">&nbsp;</div>
</div>
{literal}
<script>
var boxNo = 0;
var apts = new Array();

var xpos = 0;
var ypos = 0;
var mDown = false;

var spillOver = new Array();

fillWorkingHours();
document.getElementById('quickFill').style.display = 'none';
document.onmousemove = trackMouse;

function trackMouse(evt) {
  if(navigator.appName == "Netscape") { //FireFox & Safari code
    xpos = evt.pageX;
    ypos = evt.pageY;
  } else if(navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Opera") { //IE & Opera code
    xpos = window.event.clientX;
    ypos = window.event.clientY;
  }
}

function fillWorkingHours() {
  var dte = new Date();
  var dandt;
  var startTime = 8;
  var numberOfHours = 9;
  
  document.getElementById('workingHours').innerHTML += "<div id='hourLabels' style='float: left; width: 30px;'></div>";
  document.getElementById('workingHours').innerHTML += "<div id='hourSlots' style='padding-left: 30px;'></div>";
  dte.setHours(startTime);
  dte.setMinutes(0);
  for(i=0; i<=numberOfHours; i++) {
    var hourNumber = eval(dte.getHours()+i);
    if(dte.getHours() > 12) hourNumber = dte.getHours()-12; else hourNumber = dte.getHours();
    document.getElementById('hourLabels').innerHTML += "<div class='hourTitle'>" + hourNumber + "</div>";
    for(j=0; j<4; j++) {
      if(j!=3) {
        document.getElementById('hourSlots').innerHTML += "<div id='"+dte.getFullYear()+"-"+dte.getDate()+"-"+dte.getMonth()+" "+dte.getHours()+":"+dte.getMinutes()+"' class='hourContent' onclick='openQuickFill(" + dte.getTime() + ");'></div>";
        dte.setMinutes(dte.getMinutes()+15);
      } else {
        document.getElementById('hourSlots').innerHTML += "<div id='"+dte.getFullYear()+"-"+dte.getDate()+"-"+dte.getMonth()+" "+dte.getHours()+":"+dte.getMinutes()+"' class='lastHourContent' onclick='openQuickFill(" + dte.getTime() + ");'></div>";
        dte.setMinutes(dte.getMinutes()+15);
      }
    }
  }
}

function openQuickFill(dandt) {
  var dte = new Date();
  var qf = document.getElementById('quickFill');
  dte.setTime(dandt);
  document.getElementById('quickFillBox.date').innerHTML = dte.getMonth() + "/" + dte.getDay() + "/" + dte.getFullYear() + " <a href='#'>&gt;</a>";
  document.getElementById('quickFillBox.startTime').innerHTML = dte.getHours();
  if(dte.getMinutes() < 10) { document.getElementById('quickFillBox.startTime').innerHTML += ":0" + dte.getMinutes();
  } else { document.getElementById('quickFillBox.startTime').innerHTML += ":" + dte.getMinutes(); }
  qf.style.left = eval(xpos+1) + "px";
  qf.style.top = eval(ypos+1) + "px";
  qf.style.display = '';
}

function closeQuickFill() {
  document.getElementById('quickFill').style.display='none';
}

var apt0=[0,"2008-14-3 9:15:00",75,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt0);
var apt1=[1,"2008-14-3 9:15:0",45,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt1);
var apt2=[2,"2008-14-3 10:0:0",45,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt2);
var apt3=[3,"2008-14-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt3);
/*
var apt4=[4,"2008-14-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt4);
var apt5=[5,"2008-14-3 10:15:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt5);
var apt6=[6,"2008-14-3 10:15:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt6);
*/
var apt7=[7,"2008-14-3 10:30:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt7);
/*
var apt8=[8,"2008-14-3 10:30:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt8);
var apt9=[9,"2008-14-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt9);
var apt10=[10,"2008-14-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt10);
var apt11=[11,"2008-14-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt11);
var apt12=[12,"2008-14-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];
apts.push(apt12);
*/

for(i=0; i<apts.length; i++) {
  fillApts(apts[i][1],i);
}

function fillApts(dandt,x) {
  var d = h = m = 0;
  var startTime = 8;
  
  h = apts[x][1].substring(apts[x][1].indexOf(" ")+1,apts[x][1].length);
  h = h.substring(0,h.indexOf(":"));
  h = parseInt(h);
  m = apts[x][1].substring(apts[x][1].indexOf(":")+1,apts[x][1].length);
  m = m.substring(0,m.indexOf(":"));
  m = parseInt(m);
  d = dandt.substring(0,dandt.indexOf(" "));
  dandt = dandt.substring(0,dandt.indexOf(" ")) + " " + h + ":00:00";
  boxNo = apts[x][0];
  aptMarker = "apt" + boxNo;
  if(document.getElementById(d+" "+h+":0")) {
    switch (true) {
      case (m < 15):
        document.getElementById(d+" "+h+":0").innerHTML += "<div id='" + aptMarker + "' class='aptBox'><div id='"+aptMarker+"child"+"' style='margin-left: 2px; background-color: #FF0000; color: #FFFFFF;'>"+aptMarker+"</div></div>";
        break;
      case (m < 30):
        document.getElementById(d+" "+h+":15").innerHTML += "<div id='" + aptMarker + "' class='aptBox'><div id='"+aptMarker+"child"+"' style='margin-left: 2px; background-color: #FF0000; color: #FFFFFF;'>"+aptMarker+"</div></div>";
        break;
      case (m < 45):
        document.getElementById(d+" "+h+":30").innerHTML += "<div id='" + aptMarker + "' class='aptBox'><div id='"+aptMarker+"child"+"' style='margin-left: 2px; background-color: #FF0000; color: #FFFFFF;'>"+aptMarker+"</div></div>";
        break;
      default: 
        document.getElementById(d+" "+h+":45").innerHTML += "<div id='" + aptMarker + "' class='aptBox'><div id='"+aptMarker+"child"+"' style='margin-left: 2px; background-color: #FF0000; color: #FFFFFF;'>"+aptMarker+"</div></div>";
        break;
    }
    if(apts[x][2]>15) { 
      document.getElementById(aptMarker).style.height = ((apts[x][2]/15)*20) + ((apts[x][2]/15)*1) + "px";
      document.getElementById(aptMarker+"child").style.height = ((apts[x][2]/15)*20) + ((apts[x][2]/15)*.5) + "px";
      var dy = parseInt(d.substring(0,d.indexOf("-")));
      var dd = parseInt(d.substring(d.indexOf("-")+1,d.lastIndexOf("-")));
      var dm = parseInt(d.substring(d.lastIndexOf("-")+1,d.length));
      var temp = new Array(aptMarker,dy,dd,dm,h,m,eval((apts[x][2]-15)/15));
      spillOver.push(temp);
    } else { 
      document.getElementById(aptMarker).style.height = 20 + "px"; 
      document.getElementById(aptMarker+"child").style.height = 20 + "px";
    }
    
    d = h = m = 0;
  }
}

loopTimes();
function loopTimes() {
  var slotDate = new Date();
  var aptDate = new Date();
  var d = h = m = 0;
  var counter = 0;

  obj = document.getElementById('hourSlots').firstChild;
  while(obj) {
    childObj = obj.firstChild;
    counter = obj.getElementsByTagName('div').length/2;
    d = obj.id.substring(0,obj.id.indexOf(" "));
    slotDate.setFullYear(parseInt(d.substring(0,d.indexOf("-"))));
    slotDate.setDate(parseInt(d.substring(d.indexOf("-")+1,d.lastIndexOf("-"))));
    slotDate.setMonth(parseInt(d.substring(d.lastIndexOf("-")+1,d.length)));
    h = obj.id.substring(obj.id.indexOf(" ")+1,obj.id.length);
    h = h.substring(0,h.indexOf(":"));
    slotDate.setHours(parseInt(h));
    m = obj.id.substring(obj.id.indexOf(":")+1,obj.id.length);
    slotDate.setMinutes(parseInt(m));
    slotDate.setSeconds(0);
    if(counter>0) {
      for(i=0; i<spillOver.length; i++) {
        aptDate.setFullYear(spillOver[i][1]);
        aptDate.setDate(spillOver[i][2]);
        aptDate.setMonth(spillOver[i][3]);
        aptDate.setHours(spillOver[i][4]);
        aptDate.setMinutes(spillOver[i][5]);
        aptDate.setSeconds(0);
        if(aptDate.getTime() < slotDate.getTime()) {
          aptDate.setMinutes(aptDate.getMinutes()+(15*spillOver[i][6]));
          if(aptDate.getTime() > slotDate.getTime()) counter++;
        }
      }
      var maxWidth = 99;
      for(i=0; i<spillOver.length; i++) {
        if(document.getElementById(spillOver[i][0]).style.width) {
          if(parseInt(document.getElementById(spillOver[i][0]).style.width) < (99/counter)) {
            maxWidth = parseInt(document.getElementById(spillOver[i][0]).style.width);
          } else {
            document.getElementById(spillOver[i][0]).style.width = (99/counter) + "%";
            maxWidth = (99/counter);
          }
        } else {
          document.getElementById(spillOver[i][0]).style.width = (99/counter) + "%";
          maxWidth = (99/counter);
        }
      }
      childObj = obj.firstChild;
      while(childObj) {
        childObj.style.width = maxWidth + "%";
        childObj = childObj.nextSibling;
      }
    }
    obj = obj.nextSibling;
    d = h = m = 0;
    counter = 0;
  }
}
</script>
{/literal}
</body>
</html>

Changing the doctype to a 4.01 transitional does not seem to change the output.

This code, does what I want in FF 2.0.0.13, Safari, and Opera, but not in IE7. In IE7 the apt2 and apt7 overlap apt0. apt1 is beside apt0 as it should be, and apt3 is beside apt2 as it should be. The results get a lot strnager with IE6.

Any ideas on how to get IE6&7 to behave like FF and all the rest?

Thanks,

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws

vacunita · Apr 14, 2008

Float Div1 and div3 to the left. making sure they are narrow enough to fit in the width of the window.

Then float div's 4 and 5 also to the left. making sure their widths do not surpass the width of div 3.

In other words:

Code:

*{
margin:0;
padding:0;
}

html,body{
width:100%;
height:100%;
}

#one{
width:50%;
height:100%;
float:left;
background-color:blue;
}
#two{
width:100%;
height:100%;
}

#three{
float:left;
width:50%;
height:100%;
background-color:green;
}

#four{
width:50%;
float:left;
background-color:gray;
height:100%;
}
#five{
width:49%;
float:left;
height:100%;
background-color:red;
}

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

acent · Apr 14, 2008

Thanks for the reply, however, that will not work. Div 1 and 3 represent the 15 minute increments of an hour. So Div1 represents 9:15, and Div3 represents 9:30. Due to a lack of landscape, I cannot put 1 beside 3. It has to be underneath.

Thanks,

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws

vacunita · Apr 14, 2008

Then its not possible, you can't have div 2 be inside div 1 while being in line with div 4 and 5, and yet not be in line with div 3.

Its impossible.

Div 1 and Div 3 are boxes that contain div 2, 4, and 5.

I think you need to rethink your div layout.

What exactly is the intended display?

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

acent · Apr 15, 2008

Hi vacunita,

I have attached a screenshot of what I want it to look like. This is the way Firefox renders the divs. To keep the file size down, I did not screen shoot the whole browser window. The inner divs, 2, 4 & 5, are represented by the red boxes. Divs 1 and 3 are the white background with the dotted lines as the border-bottom.

Thanks,

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws

Vragabond · Apr 15, 2008

It seems like you should be using position absolute for this. That's the only way you will be able to make IE not grow with the child elements.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

vacunita · Apr 15, 2008

I don't quite follow the need of 2 divs just to create a background.

From what I can gather you want to have certain time slots filled. (designated by the red divs).

And why you want divs in different containers to connect like that.

I would have a single div for the background and then can have the rest of my divs line up the way I wanted to.

If what you want is to create rows, with more divs inside to represent cells, well then maybe and I'm going to go out on a limb here, this is one of those times were the use of tables would be warranted.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

acent · Apr 15, 2008

vacunita,

When you said it was not possible, I began rethinking the layout. I'm now working on a layout to have one div creating the background lines (background image) and then inside the div, all the red boxes will be placed.

Vragabond,

The main reason for all the divs was to use relative so I would not have to use absolute layouts. I am hoping to get the user's browsers to do the maim layout work for me- the usrs have to earn their keep somehow, don't they?

Given the new layout with one main div with all the red boxes inside, would it be better to relative or absolute it?

Thank you for the input.

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws

BillyRayPreachersSon · Apr 15, 2008

If you're going to rework your code, then rework the tables out of it,

At the moment, you have this odd mix of both tables and divs for layout, which is completely unnecessary.

You should be able to ditch the tables altogether.

You could also remove many of your uses of "eval" - most are not necessary either.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Positioning Divs... 3

acent

Technical User

vacunita

Programmer

acent

Technical User

vacunita

Programmer

acent

Technical User

Vragabond

Programmer

vacunita

Programmer

acent

Technical User

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor