Mehrere Ansprechbare Elemente ohne Zeilenumbruch

Vorab: Tut mir leid falls ich hier falsch bin o.ä. Ich hab nur ein kleines Problem und hoffe dass hier ventuell jemand fdie Lösung hat(:

Ich hab versucht mit html und javascript mir einen lockscreen zusammenzubauen, alles was ich dafür gebraucht hab hab ich mir "erGooglet"^^

Was ich gemacht habe:
-Die Uhrzeit ausgeben
-Dynamische Hintergrundbilder (jede halbe Stunde anderes)
-3 Balken, die jeweils Stunden Minuten und Sekunden des/r aktuellen Tages, Stunde, Minute anzeigen (bspw: der Sekundenbalken wird mit jeder Sekunde immer voller bis die Minute voll ist und fällt dann auf 0 zurück.) Dabei ändert sich die Farbe der Balken von gelb zu rot.
-Alle Wochentage stehen in einer Zeile nebeneinander und der aktuelle ist hervorgehoben (dick und etwas größere Schriftgröße)

Und beim letzten Punkt liegt mein Problem.
Im Header kündige ich 7 Elemente an, im Script - Part wird der aktuelle Wochentag erkannt und daraufhin die Schriftgröße des Elemnts erhöht mit dem der Tag übereinstimmt.
Problem ist, dass alle Objekte nicht nebeneinander sondern untereinander stehen (Zeilenumbrüche!) und ich verstehs einfach nicht
Ich gehdanvon aus dass es am <div> im body liegt, dass zeilenumbrüche erzeugt, aber weis nicht wie ich es umgehen könnte. Ich muss die Elemente ja trennen um jedem eine ID zuzuweisen oder?

Relevanter Quellcode:
head:

#date1, #date2, #date3, #date4, #date5, #date6, #date7 {

text-transform: lowercase;

}

body:

<div id="mo" style="font-size: 10px;"></div>

<div id="di" style="font-size: 10px;"></div>

<div id="mi" style="font-size: 10px;"></div>

<p id="do" style="font-size: 10px;"></p>

<p id="fr" style="font-size: 10px;"></p>

<p id="sa" style="font-size: 10px;"></p>

<p id="so" style="font-size: 10px;"></p>

script:

function calculateDate() {

var wday = new Array("mo", "di", "mi", "do", "fr", "sa", "so");

var currentTime = new Date();

var weekday =
wday[(currentTime.getDay()-1)];

document.getElementById("mo").innerText = wday[0];

document.getElementById("di").innerText = wday[1];

document.getElementById("mi").innerText = wday[2];

document.getElementById("do").innerText = wday[3];

document.getElementById("fr").innerText = wday[4];

document.getElementById("sa").innerText = wday[5];

document.getElementById("so").innerText = wday[6];

document.getElementById(weekday).setAttribute("style", "font-size: 20px;");

}

Wie gesagt mal eben "angelernt" (hab Programmierkenntnisse aus der Schule in Delphi/Turbopascal)
Danke für jede Hilfe

Falls der Fehler eher woanders im Quellcode ist, kann ich den auch noch posten

http://s14.directupload.net/file/d/3212/ziwarqid_jpg.htm

Hier sieht man das ganze mal (hab den hintergrund rot gemacht damit man es besser sieht)
Oben balken, uhrzeit.
Dadrunter die wochentage, mo größer weil heute montag ist.
Das problem ist, die wochentage sind untereinander (zeilenumbrüche) und nicht nebeneinander unter der uhrzeit wie ich es gerne hätte..
Hoffe verstehst mein problem /:

Tut mir echt total leid aber ich weiß nicht was ich jetzt machen soll
Den ganzen quellcode schicken? Oder was anderes? Sorry kenn mich leider echt garnicht aus, hab alles halt direkt am handy geschrieben und dann so direkt genutzt
Das Problem ist doch schon, dass <div></div> zeilenumbrüche erzeugt oder?..

Ok ich habs hinbekommen. Mir ist aufgefallen dass ich die bezeichnungen im kopf (date1, date2, etc) garnicht mehr verwende, waren vn einem alten versuch. Deswegen haben sie auch keinen einfluss auf den text gehabt.
Hab jetzt im kopf dinge wie:
#mo { position: absolute; top: 460px; left: 20px; color: white;}
Eingefügt und es läuft

Danke für die hilfe