Hey all,
i'm new here so i should introduce myself quick. I just started coding HTML and CSS a few weeks ago. I started a project at my firehouse and thought it would be cool to make interactive, so i figured the web would be the best medium. so far it's been going well, i've had many problems along the way but i've managed to work through them with extensive help from google. I've already learned a lot just browsing this forum, but i think it's time to say hi.

So, on to the code.
my site is here WHFD timeline (http://www.whfdhistory.com/)

at the time of this post, I have most of the Chief's in place. the items below that are just place holders from initial testing.

Problem 1: It looks completely wrong in IE. but i'm not really worried about that now, just a warning.

Problem 2: The div elements for "charles cameron" and "artur travis (AT)" won't stay on the same line. i used the same technique to line up 3 divs in the same td in the 2007 area but that's not working here. Is there a way to "force" them onto the same plane? or do i need to change things drasticly? i've tried both a pos left from the box it needs to be in and a neg left from the next one, both give the same problem.

Here's the CSS:

/*TABLES*/
.table1 {
width:100px;
border-collapse:collapse;
}
.table2 {
width:3000px;
border-collapse:collapse;
table-layout:fixed;
}
.table3 {
border-collapse:collapse;
}
.table4 {
border-collapse:collapse;
width: 500px;
}

#timeline {
width:800px;
overflow:hidden;
overflow-x:scroll;
position:relative;
}

/*CELLS & HEADER*/
td, th {
padding:0;
height:22px;
border: 1px solid #b4ced8;
}
th {
font:bold 14px "Trebuchet MS", sans-serif;
color:#4f6b72;
letter-spacing:2px;
text-align:center;
background:#cae3ed;
}

/*BOXES*/
td div {
float: left;
}

td div div {
margin:0;
text-align:center;
cursor:default;
font-size:12px;
padding:0px;
float:left;
}


/*BOX GROUPS*/
div.blue {
background:#b1c7ef;
border:1px solid #8487ad;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-family:Verdana;
}
div.gray {
background:#98AFC7;
border:1px solid #657383;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-family:Verdana;
}
div.brown {
background: #ccb199;
border: 1px solid #a38d7b;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-family:Verdana;
}


/*INDIVIDUAL BOXES*/

div#C-JPOB {
position: relative;
width:30%;
left: 72%;
}

div#C-EWS {
position: relative;
width:4%;
left: 72%;
}

div#C-WLA {
position: relative;
width:4%;
left: 72%;
}

div#C-WSJjr {
position: relative;
width:261%;
left: 11%;
}

div#C-JCH {
position: relative;
width:94%;
left: 16%;
}

div#C-WSJsr {
position: relative;
width:256%;
left: 58%;
}

div#C-LJC {
position: relative;
width:259%;
left: -4%;
}

div#C-AT {
position: relative;
width:16%;
left: 80%;
}

div#C-CAC {
position: relative;
width:120%;
left: -50%;
}

div#C-FAS {
position: relative;
width:40%;
left: 10%;
}

div#C-ABW {
position: relative;
width:20%;
left: 90%;
}

div#C-WVW {
position:relative;
width:60%;
left:0%;
}

div#three {
position:relative;
width:90%;
left:20%;
}
div#four {
position:relative;
width:400%;
left:95%;
}

/* Pop-ups*/
a.info{
position:relative; /*this is the key*/
text-decoration:none;
/*z-index:5;*/
}
a.info span{
display: none;
z-index:10;
}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:20em;
border:1px solid #000;
color:#000;
background-color:#C9C9C9;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
text-align: center;
z-index:15;
}

Have you considered doing a vertical timeline instead? 1) Might look a little neater. 2) You can color code each entry to correspond to each position.

The conflict for your current problem is with <div id="C-AT">. It's cause the line shift.

The problem you desccribe is caused by the negative left positioning on #C-AC, which is within the same table cell. Although this div has shifted left as you require, the space it should take up is forcing #C-AT down.

You could apply a negative top to #C-AT.

An alternate approach which might be easier in the long run is to use absolute positioning for your divs. The absolute positioning would avoid different timelines interfering with each other as here.

i thought about a vertical timeline, however, once i get a system going, there are going to be about 40 more "Ranks" added so a horizontal timeline will be easier to use.

i originally had "C-CAC" with pos left positioning from the cell in front of it, but i had the same problem, so i tried neg left positioning on a whim to see if it would change anything, it didn't.

can you tell me a little more about absolute position, what is it "absolute" in relation to? the top left of the browser window? or can you define a starting point?

absolute - Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

(per w3 schools)

"the first parent element" would that mean in my case, if the table it were in had a position of relative, i could then assign an absolute position off the top left of that table?

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Check out tab 3 on this link (http://www.barelyfitz.com/screencast/html-training/css/positioning/) for a good explanation and example.

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Check out tab 3 on this link (http://www.barelyfitz.com/screencast/html-training/css/positioning/) for a good explanation and example.

LOL thank you, i just googled into that exact page, i was coming back to post that i had my answer and you already found it for me.

good good, i'm going to adjust everything, i'll report back when I have everything in place.

update:
i am having fantastic success, everything is acting in a predictable fashion now.

Edit:
Everything is fixed and uploaded, thank-you all for your help.
WHFD History (http://www.whfdhistory.com)

before
http://i263.photobucket.com/albums/ii139/preludeshalyn/Screenshot2010-11-07at10950PM.png

after
http://i263.photobucket.com/albums/ii139/preludeshalyn/Screenshot2010-11-07at11209PM.png