Verschiebung mehrspaltiges Layout ohne Tabelle

[user_1234]

Hallo alle miteinander!

Ich bin recht neu in der Materie "HTML & CSS" und habe nun für einen Bekannten ein Web-projekt angefangen. Ich glaube, für den Anfang schonmal garnicht so schlecht...

Nun habe ich aber ein Problem: Ich möchte gerne den Inhalt einer Produktseite in 2 Hälften aufteilen. Darin sollen immer jeweils Überschrift, Produktbild, Überschrift, Produktbild...usw. enthalten sein.
Ich möchte gerne ohne Tabellen arbeiten, was auch so weit klappt.

Ich bin wie folgt vorgegangen:
HTML-Code:

<div class="linkespalte">
<h4><u><b>> Formstanze</b></u></h4>
<p><img src="Bilder/Formstanze Grafik.png" alt="Grafik Formstanze"></p>
</div>

<div class="rechtespalte">
<h4><u><b>> Locher</b></u></h4>
<p><img src="Bilder/Locher Grafik.png" alt="Grafik Locher"></p>
</div>

CSS-Code:

.linkespalte {
float: left;
width: 450px;
margin-left: 0px;
padding: 0px 0px;
border: 0px;
}

.rechtespalte {
width: 450px;
margin-left: 450px;
padding: 0px 0px;
border: 0px;
}

Nun ist aber leider die "Rechtespalte" ein wenig nach oben verschoben, und ich hab echt keine Idee, woran das liegen könnte...
Darum wäre ich über Hilfe sehr dankbar!!!

P.S: Hier noch das Web-Projekt inkl. Bildern, HTML-Datei und CSS-Datei:
"joru1407.magix.net/Rupp Elektro.zip"

 

[mermshaus]

Willkommen im Forum.

Das hat wahrscheinlich etwas mit collapsing margins zu tun. Der Abstand wird durch margin-top des h4-Elements verursacht. Es hilft immer, dem Rahmenelement ein padding von größer als 0 zu geben, um die Margins „im“ Rahmenelement zu behalten.

Warum sich das bei den beiden div-Elementen nicht gleichartig verhält, kann ich dir ehrlichgesagt gerade auch nicht erklären. Über solche Fragen rätseln viele. Wahrscheinlich müsste man die Spezifikation mal aufmerksam lesen, ich weiß es nicht. ;)

 

[user_1234]

Klappt!

Jo, cool, danke!
Es klappt. Habe nun beiden DIVs eine Padding von 1em Pixel zugewiesen.

Nochmal vielen dank für deine Hilfe...