CODEWITHSUNDEEP
javascriptcsshtml
chriswiec
chriswiec

Reputation: 1201

Align <td> and <div> on same line

I have a table with a <td> set up to display div#time2, which is filled with a time from a database [LastBuild]. Below that is a paragraph containing div#time, which is filled with the current time. My problem is that #time2 and [LastBuild] do not align on the same line; [LastBuild] is shown below #time2. I need those two on the same line (the second part after the paragraph already does what I want).

<table style="border-style:none; width:850px; border-spacing:0; border-collapse:collapse;">
    <tr>
        <td style="float:left; background-color:#000000;color:#FFFF00; width:335px; text-align:left; font-size:10;">By TrueLogic Company
            <p>Edited By International Electronic Components</p>
        </td>
        <td width="200"></td>
        <td style="float:right;background-color:#000000;color:#FFFF00; width:235px; text-align:right; font-size:10;">
            <div id="time2"></div>
            [LastBuild]
            <p>
                <div id="time" align="right" style="background-color:#000000;color:#FFFF00;"></div>
            </p>
        </td>
    </tr>
</table>

Here is the JavaScript feeding the divs:

var mydate=new Date();
var year=mydate.getYear();
if (year < 1000) year+=1900;
var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();
if (daym<10) daym="0"+daym;
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray=new Array("1","2","3","4","5","6","7","8","9","10","11","12");
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var s=date.getSeconds();
s = s < 10 ? '0'+s : s;
var Time = "Current Time:  ";
var Text = "Last Update:  ";

document.getElementById('time').innerHTML =Time+" "+dayarray[day]+" "+montharray[month]+"/"+daym+"/"+year+" "+hours+":"+minutes+":"+s+" "+ampm; 
document.getElementById('time2').innerHTML =Text+" "+dayarray[day];

Upvotes: 0

Views: 2229

Answers (2)

Trojan
Trojan

Reputation: 2254

#time2, a div, defaults to display:block, which causes anything after it to be displayed after a newline. To get around this, use this CSS (in addition to what you already have for this element):

#time2 {
    display:inline-block;
    *display:inline;
    zoom:1;
}

I forgot about older versions of IE. The last two lines should take care of it; see this answer for explanation.

In follow-up to the comments I left on your question, I created an example of what I think your intention was. I changed some of the tags. Tables are really for tabular data, so divs seemed more appropriate in this case. I explained all of the CSS changes I made in comments. Feel free to use it if you want! If it's suitable, it's much cleaner.

Update: Microsoft claims that inline-block is supported in IE 5.5+ (which, I believe, is called IE 6).

Upvotes: 1

developerCK
developerCK

Reputation: 4506

remove <p> tag b/w both div because p is cause to break newline

<Td style="float:right;background-color:#000000;color:FFFF00; width:235px; text-align:right; font-size:10;"><div id="time2"></div> [LastBuild] **<p>** <div id="time" align="right" style="background-color:#000000;color:FFFF00;"></div></td>

Upvotes: 0

Related Questions