Table in Div erzeugt merkwürdigen Rahmen bzw. Zeilenumbruch

[Mega Matze]

Hallo,

ich habe das ganze Internet durchsucht. Aber nirgends die Lösung gefunden. Dabei ist das Problem eigentlich total simpel.

Ich möchte einfach eine table in einem div platzieren. Hie ein Minimalbeispiel:

  
<div style='display:inline; padding:5px; border:1px black solid;clear:left;' id='Tab_3_Inhalt'>  
	<div style='display:inline; padding:5px; border:1px black solid;clear:left;' id='Tab_3_Inhalt'>  
		<table>  
			<tr><td>  
				hallo  
			</td></tr>  
			<tr><td>  
				hallo 2  
			</td></tr>  
		</table>		  
	</div>  
</div>	  

Und so sieht das ganze dann aus (Firefox):

[Mega Matze]

Ups, jetzt habe ich aus Versehen abgeschickt. Ich wollte eigentlich nur die Vorschau sehen :-(
Tut mir Leid

Was mich jetzt wundert ist, dass der Rahmen so merkwürdig aussieht? Warum ist der Rahmen nicht rechteckig?

Und warum gibt es eine Leerzeile vor und nach der Tabelle?

Vielen Dank für eure Hilfe,
Matze

[Der Martin]

Hi,

ich habe das ganze Internet durchsucht.

Respekt, das sind ja einige Milliarden Seiten.

Ich möchte einfach eine table in einem div platzieren. Hie ein Minimalbeispiel:

Dein Beispiel wirft die Fragen auf:
  a) wozu die div-Elemente? Was gruppieren sie? Solange sie nur jeweils ein einziges Kindelement
     haben, sind sie eigentlich sinnfrei.
  b) wozu die Tabelle? Eine Tabelle mit nur einer Spalte ergibt nicht viel Sinn. Mich beschleicht
     der Verdacht, dass du die Tabelle nur zum Layouten missbrauchst.

<div style='display:inline; padding:5px; border:1px black solid;clear:left;' id='Tab_3_Inhalt'>

<div style='display:inline; padding:5px; border:1px black solid;clear:left;' id='Tab_3_Inhalt'>

  
Hmm. Besitzt du auch zwei Autos mit demselben Autokennzeichen? Nein? Aber zwei Elemente in einem HTML-Dokument mit derselben ID findest du in Ordnung? Eine ID muss dokumentweit eindeutig sein, kann also nur einmal vergeben werden.  
  

> Und so sieht das ganze dann aus (Firefox):  
> ![Screenshot](http://i55.tinypic.com/f1zm6g.png)  
  
Und das wundert dich, wenn du die beiden div-Container zu Inline-Elementen umwidmest, und dann ein Blocklevel-Element dazwischenpackst?  
  
So long,  
 Martin  

-- 
Kleine Geschenke erhalten die Freundschaft.  
Große verderben sie aber meist auch nicht.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Metalgurke]

Hi Mega Matze,

ich kenne den Rest des Codes nicht, aber wenn du bei beiden div Style - Angaben das display: inline webglässt, schaut es "normal" aus.

Problem wird sein, dass in Inline-Elementen keine Block-Elemente vorkommen sollten.

Gruß Metalgurke

[suit]

Problem wird sein, dass in Inline-Elementen keine Block-Elemente vorkommen sollten.

vorkommen _dürfen_ - aber div-Elemente sind block-Elemente, ich sehe da kein Problem.

[Der Martin]

Hallo,

Problem wird sein, dass in Inline-Elementen keine Block-Elemente vorkommen sollten.
vorkommen _dürfen_ - aber div-Elemente sind block-Elemente, ich sehe da kein Problem.

ja, außer der Darstellung, nachdem man sie zu CSS-Inline-Elementen umgestellt hat. ;-)

Ciao,
 Martin

[Mega Matze]

Hi,

als erstes die direkten Antworten auf eure Anmerkungen

Dein Beispiel wirft die Fragen auf:
    a) wozu die div-Elemente? Was gruppieren sie? Solange sie nur jeweils ein einziges Kindelement haben, sind sie eigentlich sinnfrei.
    b) wozu die Tabelle? Eine Tabelle mit nur einer Spalte ergibt nicht viel Sinn. Mich beschleicht der Verdacht, dass du die Tabelle nur zum Layouten missbrauchst.

Ich gebe zu dass die zwei Divs so wie sie im Beispielcode stehen keinen großen Sinn ergeben. Ich wollte euch ein Minimalbeispiel präsentieren, damit der Kern meiner Frage besser deutlich wird. Der Inhalt besteht auch aus mehr als nur einer Tabelle und die Tabelle hat auch nicht nur eine Zelle.

Hmm. Besitzt du auch zwei Autos mit demselben Autokennzeichen? Nein? Aber zwei Elemente in einem HTML-Dokument mit derselben ID findest du in Ordnung? Eine ID muss dokumentweit eindeutig sein, kann also nur einmal vergeben werden.

Ups, das habe ich beim Erstellen des Minimalbeispiels wohl übersehen.

Eure Lösung, dass man das Layout auf Block stellen muss war natürlich genau richtig. Jetzt habe ich schöne rechteckige Rahmen um meine Divs. Diese gehen zwar über die ganze Breite, aber das kriege ich ja wohl über "width" korrigiert.

Ich dachte dass dieses Block/Inline nur angibt, wie sich das div in sein Umfeld einfügt. Also ob es mit Text der vorher oder hinterher kommt einen Fluss ergibt oder ob es eine neue Zeile einnimmt. Diese Vorstellung kahm daher, dass ich im Internet an diversen Stellen gelesen habe, dass man ein div auf "inline" umstellen soll, wenn man den Zeilenumbruch den es erzeugt nicht haben will.
Aber offensichtlich bestimmt man mit Block/Inline immer gleichzeitig wie es sich in umliegenden Text einfügt und ob es selber rechteckig ist oder nicht. Habe ich das so richtig verstanden?

Ich glaube ich habe die Antwort gerade gefunden. Natürlich auf SelfHTML ;-)

inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss.

Komisch. Gestern habe ich gegooglet wie bescheuert und einfach nichts gefunden. Wahrscheinlich weil ich nicht wirklich wusste nach welchem Problem ich eigentlich suchen soll und weil es zu trivial war.

Also noch mal: Danke für die Hilfe!

[Der Martin]

Hallo,

Eure Lösung, dass man das Layout auf Block stellen muss war natürlich genau richtig. Jetzt habe ich schöne rechteckige Rahmen um meine Divs. Diese gehen zwar über die ganze Breite, aber das kriege ich ja wohl über "width" korrigiert.

ja, richtig. Oder mit seitlichen margins. Oder mit float (aber das wirft neue Probleme auf).

Ich dachte dass dieses Block/Inline nur angibt, wie sich das div in sein Umfeld einfügt. Also ob es mit Text der vorher oder hinterher kommt einen Fluss ergibt oder ob es eine neue Zeile einnimmt.

Das ist ein Teil der Wahrheit. :-)

Aber offensichtlich bestimmt man mit Block/Inline immer gleichzeitig wie es sich in umliegenden Text einfügt und ob es selber rechteckig ist oder nicht. Habe ich das so richtig verstanden?

Ich vermute ja. Man kann es auch anders sagen:
Ein Inline-Element hat keine feste eigene Form mehr, es verteilt sich wie Fließtext über die Zeilen und kann auch mitten in der Zeile beginnen, und zwei Zeilen weiter unten enden.
Ein Blockelement hat dagegen immer einen rechteckigen Umriss und setzt sich dadurch vom vorhergehenden und vom nachfolgenden Element (oder Fließtext) ab, was optisch den Effekt eines Zeilenumbruchs hat.

Ich glaube ich habe die Antwort gerade gefunden. Natürlich auf SelfHTML ;-)

inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss.

Wenn es das ist, was du haben willst - ja, dann ist inline-block eine gute Alternative.

Ciao,
 Martin