Align and
on same line

Question

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];

You might need to give `time2` the property `display:inline-block`. If that doesn't work, give `td` a higher width. Also, I'd remove `float:right` from `td`. If you need the table floated right, float the table - not portions of it. — Trojan, Jul 27 '13 at 07:29
@Trojan part of the table is floated right and part left let me post the whole table so you can see. but your right it probably doesn't need it. — chriswiec, Jul 27 '13 at 07:37
@Trojan you should post the inline block as your answer that worked. — chriswiec, Jul 27 '13 at 07:42
I'm glad I could help. You also need to change the three `FFFF00`s to `#FFFF00`. With the rest of your code, the floats are actually changing the dimensions you set: the leftmost div gets some width cut off, while the rightmost gets some height cut off. Removing the floats on each fixes this. — Trojan, Jul 27 '13 at 08:03
As far as syntax: in your HTML, you should keep all tags lowercase; while tags are not case-sensitive (in HTML, that is), it's easier to read, and complies with W3C recommendations. In JavaScript, you shouldn't rely on **ASI** (Automatic Semicolon Insertion), because it could cause some pretty annoying problems. All you need to do is end each statement with a semicolon. — Trojan, Jul 27 '13 at 08:10
I've edited your code a little to make it more compliant with standards, readable, and safe (don't worry, I didn't change any content). If you do stick with the table (I've added an alternative in my answer below), your code ought to have: 1) ` `; 2) A semicolon **;** after each Javascript statement **;** and 3) ` with matching closing ` — Trojan, Jul 27 '13 at 09:18

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

#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).

edited May 23 '17 at 11:49

Community

1
1

answered Jul 27 '13 at 07:54

Trojan

2,256
28
40

But `display: inline-block` won't work in earlier version of Internet Explorer – Kamran Ahmed Jul 27 '13 at 08:21
Should I put all 3 in the style? – chriswiec Jul 27 '13 at 08:36
Only if you need to support IE 6 and 7 (it can't hurt any other browsers though). If not, just the first one. Look at the link I just posted. I think that should do what you want, and if so, it's more appropriate for the task. – Trojan Jul 27 '13 at 08:39
@Trojan i'm so confused as to how you created divs only to bring up all the text. I've only ever used tables? – chriswiec Jul 27 '13 at 16:27
@Trojan if I replace the tables with the html where do I then put the css? – chriswiec Jul 27 '13 at 16:28
@Trojan the only problem now is all the data on the whole page is 850px the #container is the only thing completely off centered to the left now.How do I put it back in the middle of the page? – chriswiec Jul 27 '13 at 16:52
1

[This tutorial](http://www.w3schools.com/html/default.asp) is good for learning about HTML elements. Text can be in almost any element. In my opinion, tables make the layout difficult to change (especially when it's not data with labels and values). Put all the CSS in a file with extension "css" (for example, "style.css"). Then in the `` portion of your HTML, link it with `` (change "style.css" to the file name you chose). To center #container: `margin:auto`. I updated the example with this – Trojan Jul 27 '13 at 22:03
@Trojan what happened to the answer by using all divs and css in the style section of the page? – chriswiec Jul 28 '13 at 01:24
That works too! If this is the only page you need this layout for, then put all the CSS in ``. Either of those ways make it easier to read & edit later than putting it inline (within the tags). If you need it for multiple pages, though, the `` tag makes much more sense (using that tag means you don't have to put the CSS in every single HTML file) – Trojan Jul 28 '13 at 02:37
I have three more tables that is just text can you help me make those divs only and and style them in the style section? – chriswiec Jul 28 '13 at 03:11
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34334/discussion-between-trojansdestroy-and-chrisw-iec) – Trojan Jul 28 '13 at 22:09
@chrisw.iec I don't mind helping at all! Please provide the rest of your code (the discussion linked right above here is a good place). I'm sorry if you didn't receive a notification on the 28th. I forgot to send you a notofication with the @ callout – Trojan Aug 02 '13 at 10:35

score 0 · Answer 2 · answered Jul 27 '13 at 07:48

0

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>

answered Jul 27 '13 at 07:48

developerCK

4,418
3
16
35

I want the break where the
is I need everything after the
to go underneath and it does thanks though.
– chriswiec Jul 27 '13 at 08:35

Align and on same line

2 Answers2

Align and
on same line