# Trying to construct a DIV grid... Imitating spanning... any ideas please?



## innus (Apr 12, 2002)

Hi!

I'm trying to create a grid of div layers to simulate a table. Here are my efforts so far: so far so good, no?
(http://www.nsrfm.co.uk/schedule/template_techguy.php) (this url link is now dead, sorry)

Anyway, now I'd really love to *vertically* span two of those cells (which are div layers). Obviously, you can't do this with div layers, so the most obvious solution would be to just double the height of a div layer, which would therefore lie OVER the top of the layer directly below it, and thus make it appear merged.

Unfortunately, this causes the rest of div layers to be displaced from their positions: http://www.nsrfm.co.uk/schedule/template_techguy_merged.php (this url link is now dead, sorry)

I'd love it to look like this mock-up....:










My question is... how can I make a "double height" layer HOVER over the top of the others, and therefore not affect their positions? (the relevant css class is: #weekday_2hour )

I know I could use a table, but I spent ages working out how I could use div tags to do this, before I realised I couldnt span...

I'd really appreciate a helping hang here, it must just be one little css property that I'm not aware of 

Cheers in advance!

Ian

Here is my CSS code:


```
#sched_wrapper {
	position:absolute;
	width:650px;

}
#weekday {
	position:relative;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid;
	border-color: white; 
	top:10px;
}
#weekday_2hour {
	position:relative;
	width:104px;
	height:80px;
	float: left;
	border-width: 1px;  
	border-style: solid;
	border-color: white; 
	top:10px;
}
#weekdaylabel {
	position:relative;
	width:104px;
	height:10px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;

}
#weekendday {
	position:relative;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid; 
	border-color: white; 
	top:10px;
}
#weekenddaylabel {
	position:relative;
	width:104px;
	height:10px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;
}

#verttext {
	position:relative;
	background-image:url(../images/schedule/slot1.gif);
	background-repeat:no-repeat;
	width:10px;
	height:40px;
	z-index:1;
	float: left;
	top:10px;
	padding-left:3px;
}
#spacer {
	position:relative;
	width:13px;
	height:10px;
	float: left;
}
```
and here is the HTML which generates it: (obviously there is a lot of repetition, creating each div layer.)


```
<div id="sched_wrapper">
  <div id="spacer"></div>
  
  <div id="weekdaylabel">
    <div align="center">Monday</div>
  </div>
  <div id="weekdaylabel">
    <div align="center">Tuesday</div>
  </div>
  <div id="weekdaylabel">
    <div align="center">Wednesday</div>
  </div>
  <div id="weekdaylabel">
    <div align="center">Thursday</div>
  </div>
  <div id="weekdaylabel">
    <div align="center">Friday</div>
  </div>
  <div id="weekenddaylabel">
    <div align="center">Weekend</div>
  </div>


<!-- CREATE ONE ROW: !-->
  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>
<!-- END CREATE ONE ROW, repeat... !-->

  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday_2hour">Two hour</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>


  <div id="verttext">
  </div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekday">a</div>
  <div id="weekendday">a</div>
 </div>
```


----------



## thecoalman (Mar 6, 2006)

FYI, you can only assign an id once and align="center" is not allowed in a XHTML document.

As far as what you want to do use absolute positioning inside one of your floated divs. It will expand to whatever it needs to be without interupting the other divs.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#sched_wrapper {
	position:absolute;
	width:650px;

}
.weekday {
	position:relative;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid;
	border-color: white; 
	top:10px;
}
.weekday_2hour {
	position: absolute;
	top: 0px;
	left: 0px;
	width:104px;
}
.weekdaylabel {
	position:relative;
	width:104px;
	height:10px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;

}
.weekendday {
	position:relative;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid; 
	border-color: white; 
	top:10px;
}
.weekenddaylabel {
	position:relative;
	width:104px;
	height:10px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;
}

.verttext {
	position:relative;
	background-image:url(../images/schedule/slot1.gif);
	background-repeat:no-repeat;
	width:10px;
	height:40px;
	z-index:1;
	float: left;
	top:10px;
	padding-left:3px;
}
.spacer {
	position:relative;
	width:13px;
	height:10px;
	float: left;
}



</style>
  <title>test</title>
</head>
<body>
<div id="sched_wrapper">
  <div class="spacer"></div>
  
  <div class="weekdaylabel">
    <div >Monday</div>
  </div>
  <div class="weekdaylabel">
    <div >Tuesday</div>
  </div>
  <div class="weekdaylabel">
    <div >Wednesday</div>
  </div>
  <div class="weekdaylabel">
    <div >Thursday</div>
  </div>
  <div class="weekdaylabel">
    <div >Friday</div>
  </div>
  <div class="weekenddaylabel">
    <div >Weekend</div>
  </div>


<!-- CREATE ONE ROW: !-->
  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>
<!-- END CREATE ONE ROW, repeat... !-->

  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday"><div class="weekday_2hour">Two hour<br />Two hour<br />Two hour<br /></div></div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>
 </div>


</body>
</html>
```


----------



## innus (Apr 12, 2002)

Sweeet.

That works perfectly, with a few minor tweaks, I altered:


```
.weekday_2hour {
	position: absolute;
	top: 0px;
	left: 0px;
	width:104px;
}
```
to be:

```
.weekday_2hour {
	position: absolute;
	top: 0px;
	left: 0px;
	width:102px;
	height:80px;
	background-color: #003366;
	z-index: 5;
	padding: 1px;
}
```
but your suggestion was perfect. Thanks! And thanks for the reminder about id's... left it up to dreamweaver... oops.

To help people in the future:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">


BODY 

	{

      	background-color : #003366;

		color:#ffffcc;

		font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

     }

#sched_wrapper {
	position:absolute;
	width:650px;

}
.weekday {
	position:relative;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid;
	border-color: white; 
	top:10px;
}
.weekday_2hour {
	position: absolute;
	top: 0px;
	left: 0px;
	width:102px;
	height:80px;
	background-color: #003366;
	z-index: 5;
	padding: 1px;
}
.weekdaylabel {
	position:relative;
	width:104px;
	height:10px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;

}
.weekendday {
	position:relative;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid; 
	border-color: white; 
	top:10px;
}
.weekenddaylabel {
	position:relative;
	width:104px;
	height:10px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;
}

.verttext {
	position:relative;
	background-image:url(../images/schedule/slot1.gif);
	background-repeat:no-repeat;
	width:10px;
	height:40px;
	z-index:1;
	float: left;
	top:10px;
	padding-left:3px;
}
.spacer {
	position:relative;
	width:13px;
	height:10px;
	float: left;
}



</style>
  <title>test</title>
</head>
<body>
<div id="sched_wrapper">
  <div class="spacer"></div>
  
  <div class="weekdaylabel">
    <div >Monday</div>
  </div>
  <div class="weekdaylabel">
    <div >Tuesday</div>
  </div>
  <div class="weekdaylabel">
    <div >Wednesday</div>
  </div>
  <div class="weekdaylabel">
    <div >Thursday</div>
  </div>
  <div class="weekdaylabel">
    <div >Friday</div>
  </div>
  <div class="weekenddaylabel">
    <div >Weekend</div>
  </div>


<!-- CREATE ONE ROW: !-->
  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>
<!-- END CREATE ONE ROW, repeat... !-->

  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday"><div class="weekday_2hour">Two hour<br />Two hour<br />Two hour<br /></div></div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">
  </div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>
 </div>


</body>
</html>
```
Cheers mate:up:


----------



## innus (Apr 12, 2002)

Sorry to drag this back up again... but the solution doesnt work in IE7, and possibly IE6, although I've not got it installed. I think it worked ok in IE6 though:

http://www.nsrfm.co.uk/schedule/

the "here is a short name about a radio show blah" div layer doesnt appear over the top of the one directly beneath.

If you have a look at the page in firefox, you will see how it loads properly.(ignore the javascript hyperlinks for now ).

Look at the screenshot above for how it's supposed to look 

any advice at how to get this to work in IE7?

Cheers in advance.
Ian


----------



## covert215 (Apr 22, 2006)

If it works in IE6, but not IE7, that means that there was something wrong with your code and IE7's stricter rules did not understand it.

IE7 is the correct way to format, while IE6 was lenient. You also want to make sure it works in Firefox. If you do everything correctly it should work in both.


----------



## innus (Apr 12, 2002)

To be fair, it DOES work in firefox, like I said. Could it be due to IE7 being a newly released browser? Bugs? I don't know.

Please can someone confirm it loads properly in IE6


----------



## covert215 (Apr 22, 2006)

No. Displaying correctly in IE6 was a bug.


----------



## innus (Apr 12, 2002)

Ok, I've just checked the page in IE6 and it DOESNT display correctly.. so.. Covert215: are you just guessing? I ask because you dont seem to have actually _checked_ the code in question, ("Displaying correctly in IE6 was a bug.") you just seem to be making sweeping generalisations about browser compatibility.

Fair enough, it doesnt work in IE, but can you tell me how to fix the problem please? It would be more helpful 

I don't mean to be rude 

Cheers


----------



## thecoalman (Mar 6, 2006)

The code I posted above works for me in IE6, haven't tested in IE7.


----------



## covert215 (Apr 22, 2006)

I have not tested it. But you told me that it worked. So if it worked in IE6 but not IE7, then it was a bug in 6.


----------



## thecoalman (Mar 6, 2006)

Actually there is one small problem as far as IE6 is concerned, the very last DIV drops below the others in the line. If you add this it will fix it.

Otherwise it looks identical in both IE6 and FF. You probably have some other code somewhere that is messing it up.



covert215 said:


> I have not tested it. But you told me that it worked. So if it worked in IE6 but not IE7, then it was a bug in 6.


If it's a bug then it would be a bug in both IE and Firefox because it works the same in both. I'm still waiting another few days before installing IE7.


----------



## covert215 (Apr 22, 2006)

Then maybe it is a bug created by trying to fix a bug in IE7....

Its two different things to write to the standards and to write to the browsers...


----------



## Eriksrocks (Aug 7, 2005)

Works for me in Firefox - just confirming. 

You've got:


```
here is a short name about a radio show blah

[URL=javascript:;]PlaceholderName[/URL]
```
Maybe if you take the first part out because your "2hour" div is inside that - IE7 might be proccessing that and for some reason using the weekday class instead of the weekday_2hour class...

Try just replacing it with this:

```
here is a short name about a radio show blah

[URL=javascript:;]PlaceholderName[/URL]
```


----------



## thecoalman (Mar 6, 2006)

BTW, just to clarify I'm refferring to the code I posted as displaying correctly in IE6 and FF not your live code. As stated above the live links look good in FF, in IE it looks really bad. you appear to have a problem eith the font size that is causing it. The fontsize for the text in FF is way smaller.

You're probably seeing a problem that is created in both IE6 and 7

Try this as a test, the text will be clipped but the div's should line up correctly.

weekday,weekendday
{
overflow: hidden
}


----------



## innus (Apr 12, 2002)

Hi all! Thanks for your helpful replies.

*Coalman:*


```
<div class="verttext">
</div>
```
I'm not sure this is needed: the bottom sticking-out div is just how a 2-hour layer looks: it's twice as tall. It looks naff at the moment but i'll make it look better soon  thanks though!

Also, 

```
weekday,weekendday
{
overflow: hidden
}
```
I've added this and left it in, as it makes sense to keep it there, thanks for the reminder . Unfortunately it doesnt fix the IE problem.

*covert215:* I'm trying to write for the standards, hence it looks great in Firefox. Now I have to go back and get it to work in ie too.

*Eriksrocks: *I tried what you suggested, but it messed the page up completely. This is because the weekday_2hour is deliberately positioned inside the 1 hour div tags, and then deliberately overflows from it: this is the fix as suggested by thecoalman ^^^, which helped me out earlier.

*To all:*

If I can just summarise my problem:

This screenshot is taken from IE6:









The top left div layer (i.e. the top left most cell)is supposed to be TWICE as high as the one to it's right. So this means that it should cover up the one beneath,so you shouldn't see "Placeholdername". In Firefox, this works ok: the cell is twice as tall. In i.e., it doenst cover up the cell beneath, so it looks like the two over-run.

How can I get the top left cell to flow OVER THE TOP of the cell beneath, like it does in firefox, and be opaque, so you can't see beneath it?

The relevant stylesheet is: http://www.nsrfm.co.uk/schedule/css_schedule.css and the notable styles are:


```
#sched_wrapper {
	position:relative;
	width:650px;
	z-index:2;
	top:10px;
}
.weekday {
	position:relative;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid;
	border-color: white; 
	top:10px;
	
	text-align: center;
	font-size:smaller;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFF99;
}
weekday,weekday_2hour,weekendday
{
overflow: hidden
} 
.weekday_2hour {
	position: absolute;
	top: -1px;
	left: -1px;
	width:102px;
	height:80px;
	background-color: #003366;
	padding: 1px;
	z-index:5;
	border-width: 1px;  
	border-style: solid; 
	border-color: white; 
	back
}
```
And finally, .weekday_2hour divs go INSIDE .weekday, and deliberately overflow by twice the height.

Cheers, thanks in advance

Ian


----------



## innus (Apr 12, 2002)

*bump*

This isn't resolved yet, even though it seems to be if you read half the thread lol 

Should I open another thread?


----------



## Eriksrocks (Aug 7, 2005)

No, it would just be closed anyway. I'm just going to start throwing up random ideas, I'm not sure if they'll come close to working or not... 

What if you get rid of the div that it should be covering up? Or what if you replace it with an invisible div?


----------



## thecoalman (Mar 6, 2006)

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#sched_wrapper {
	width:650px;
}
.weekday {
	background-color: #00FF80;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid;
	border-color: white; 
	top:10px;
}
.weekday_2hour {
	position: relative;
	top: 0px;
	left: 0px;
	width:104px;
	height:80px;
	z-index: 3;
	background-color: #0000FF;
}
.weekdaylabel {
	
	width:104px;
	height:10px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;

}
.weekendday {
	background-color: #FF8000;
	width:104px;
	height:40px;
	float: left;
	border-width: 1px;  
	border-style: solid; 
	border-color: white; 
	top:10px;
}
.weekenddaylabel {
	
	width:104px;
	height:20px;
	float: left;
	border: white;
	border-width:medium;
	padding-left:1px;
}

.verttext {
	
	background-color: #FF0000;
	width:10px;
	height:40px;
	float: left;
	top:10px;
	padding-left:3px;
}
.spacer {
	
	width:13px;
	height:10px;
	float: left;
}



</style>
  <title>test</title>
</head>
<body>
<div id="sched_wrapper">
  <div class="spacer"></div>
  
  <div class="weekdaylabel">
    <div >Monday</div>
  </div>
  <div class="weekdaylabel">
    <div >Tuesday</div>
  </div>
  <div class="weekdaylabel">
    <div >Wednesday</div>
  </div>
  <div class="weekdaylabel">
    <div >Thursday</div>
  </div>
  <div class="weekdaylabel">
    <div >Friday</div>
  </div>
  <div class="weekenddaylabel">
    <div >Weekend</div>
  </div>


<!-- CREATE ONE ROW: !-->
  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>
<!-- END CREATE ONE ROW, repeat... !-->

  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday"><div class="weekday_2hour">Two hour<br />Two hour<br />Two hour<br /></div></div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>


  <div class="verttext">&nbsp;
  </div>  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekday">a</div>
  <div class="weekendday">a</div>
 </div>


</body>
</html>
```


----------



## innus (Apr 12, 2002)

hoho! And the man, again, is a genius. Thank you very much! I'll implement that as soon as i can. You've no idea how excited that  wink got me. Untold promises awaited.... and delivered.

Cheers!!
I'll post the final result sometime today

Ian


----------



## innus (Apr 12, 2002)

Yeah it works great!  Thanks, thecoalman

Ian


----------

