Höhe automatisch an Inhalt anpassen funktioniert nicht.

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe ein ziemlich einfaches Problem, aber nach einer Stunde des Suchens, finde ich den Fehler noch immer nicht. Vielleicht könnt ihr helfen.

Also, hier mal der HTML-Quellcode des Problems:

[I]

Aktuelles



Lorem ipsum

Hier steht der Text


Weitere Infos

<article_rechts>

Lorem ipsum



Heading


Hier steht ein viel längerer Text.


Mehr erfahrenNoch ein Link
</article_rechts>

[/I]

Und das dazugehörige CSS:

[I]#mid-section {
width:1000px;
height:750px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
color:#666;
background-color:#FFF;
font-size:12px;
text-align:left;
}

h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:inherit;
margin-bottom:10px;
}

h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
margin-top:10px;
margin-bottom:10px;
font-style:italic;
}

h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
border-bottom:1px #000 dashed;
margin-top:35px;
margin-bottom:20px;
}

article {width:280px; height:auto; bg-color:#fff; text-align:left; float:left; margin-right:36px; padding-left:40px;}
#mid-section article img {margin-bottom:15px;}
#mid-section article p {line-height:17px; margin-bottom:20px;}

#mid-section article a{
color:#fff;
letter-spacing:0.01em;
text-decoration:none;
background-color:#F00;
padding:5px 10px 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#mid-section article a:hover {
background-color:#F00;
box-shadow:0 0 1px #666;
}

article_rechts {width:600px; height:auto; bg-color:#fff; text-align:left; float:left; margin-right:36px;}
#mid-section article_rechts img {margin-bottom:15px;}
#mid-section article_rechts p {line-height:17px; margin-bottom:20px;}

#mid-section article_rechts a{
color:#fff;
letter-spacing:0.01em;
text-decoration:none;
background-color:#F00;
padding:5px 10px 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#mid-section article_rechts a:hover {
background-color:#F00;
box-shadow:0 0 1px #666;
}
[/I]
Die Idee dahinter ist ja denke ich klar. Ich habe für den Teil der Seite, in dem sich der Hauptinhalt befindet, einen Style eingerichtet und weil ich möchte, dass der Inhalt auf eine schmale und eine Breite Spalte verteilt wird, gibt es eben diese Unterteilungen. Problem ist nur, dass ich eben als Höhe nicht auto oder 100% eingeben kann, weil dann die beiden Spalten quasi ausgeklammert werden. Ist das einigermaßen verständlich? Natürlich möchte ich nicht eine feste Höhe, wie jetzt oben, festlegen, weil das ja in den unterschiedlichen Browsern dann total bescheuert aussieht. Und auch einfach nicht funktioniert. Ich müsste dann ja auch für jede einzelnen Unterseite einen Stil und damit eine Höhe eingeben.

[B]Aber wo ist der verdammte Fehler???

Danke für Euren Input![/B]

2

Ist das einigermaßen verständlich?

Ehrlich gesagt: nein. Stelle die Seite mal online.

Außerdem kannst die Höhe eines Containers dessen Inhalt anpassen, aber nicht umgekehrt, und die automatische Verteilung des Inhalts über mehrere Container funktioniert bisher lediglich mit cutting edge Attributen wie CSS Regions.
http://dev.w3.org/csswg/css-regions/

3

Aber der Aufbau der Seite ist im Grunde sehr simpel.
Ich habe quasi mehrere untereinander angeordnete Streifen mit verschiedenen Inhalten. Hier geht es nur um den Hauptinhalt, der eben eine linke und eine Rechte Seite hat. Wahlweise könnte ich dies auch über eine Tabelle regeln, aber das macht doch heute kein Mensch mehr… :wink:

Es geht mir ja nur darum, dass ich nicht sagen muss: height=1000px. Weil, der Inhalt auf den einzelnen Unterseiten ja doch sehr variabel ist und ich dann für jede Seite eine eigene Mid-Section anlegen müsste. Es muss doch möglich sein, dem CSS zu sagen: Mid-Section soll immer so hoch sein, wie der Inhalt in article und article-rechts.

4

Es muss doch möglich sein, dem CSS zu sagen: Mid-Section soll immer so hoch sein, wie der Inhalt in article und article-rechts.

CSS kann das nicht, aber JavaScript oder besser noch: jQuery. Nimm die Höhe des Containers article (Funktion height() ) und weise diese als CSS-Attribut (Funktion css() ) der Mid-Section zu.

5

Kann man nicht statt dessen das CSS umbauen? Von Javascript habe ich ja noch weniger Ahnung. :wink:

6

Also, muss man denn diese Zweiteilung überhaupt so verschachteln? Oh man, ich glaube, ich mach gleich doch eine Tabelle!

7

Dann bist du für immer verloren :stuck_out_tongue:
Also, soweit ich das verstanden habe, ist das Problem, dass durch den float die mid-section sozusagen keinen Inhalt hat, der sich auf die Höhe auswirkt. Entwder du umgehst den float (ich habe keine Ahnung, ob „display:inline-block“ vielleicht eine Alternative wäre), oder du musst jQuery einsetzen. Es sei denn, die rechte Spalte ist immer länger als die linke, dann könntest du danach auch clearen.

Edit: Es hilft im Übrigen nicht immer wieder zu betonen, wie einfach das Problem ist. Denn warum bekommst du es dann nicht hin?

8

Danke, ich komme der Lösung langsam näher.

Was ich halt nicht schnalle ist, warum das bei dieser Seite geht: www.athlesys.de

und bei dieser nicht: www.3k-gestaltung.de/sensotest/index.html

9

Vielleicht denke ich einfach zu kompliziert und finde deshalb die Lösung nicht. :wink:

10

Erst mal Fehler bereinigen?
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.3k-gestaltung.de%2Fsensotest%2Findex.html