Height:auto funktioniert bei verschachtelten DIVs nicht?

    Hallo,
    ich habe eine Seite in HTML und CSS gebaut. Dabei habe ich mehrere DIVs verschachelt. Die Idee war, dass es einen Content-Div (content2) gibt, den ich fülle mit zwei DIVs (colleft und colright), so dass ich den Inhalt im Content-Div geordnet habe. Wenn ich in colright oder colleft jetzt mehr hineinschreibe, als min-height oder height bei #content2 an Platz bereitstellen, wird über den Rand hinausgeschrieben und nicht #content2 angepasst.

    Ein CSS-Ausschnitt:

    Der Aufbau im HTML-Doc:

    Code
    <div id="content2">
      <div class="colright"><h2>...</h2><p>...</p></div>
      <div class="colleft">...</div>
      <div id="impressumlink">...</div>
</div>

    Im Anhang noch einmal die vollständigen Dateien, da dies nur der grobe Aufbau eines kleinen teiles ist.

    Vielleicht ist der gesamte Aufbau der Seite Murks?

    Bin für jede Hilfe dankbar.

    poste mal den Link zur Seite Bitte, auf jeden Fall geht das nicht

    HTML
    min-height:410px;    
        height:auto !important;
        height:400px;}



    entweder

    HTML
    min-height: 410px;
height: auto;



    oder nur

    HTML
    height: px,auto,%,em;



    aber du sagst min-height(Mindesthöhe): 410px; und die ganze höhe ist nur 400px:!:

    Zitat von webdesigner


    HTML
    height: px,auto,%,em;

    aber du sagst min-height(Mindesthöhe): 410px; und die ganze höhe ist nur 400px:!:

    Hi, das ist durch Probieren entstanden, um die Seite bei IE und FF gleich aussehen zu lassen. Weil IE soweit ich weiß das min-height ignoriert, klappte das halbwegs. Es ging darum, den "Impressumslink" direkt unter dem Content-DIV zu haben. Der Content-DIV soll mindestens 400 bzw 410 Px hoch sein und sich nur bei Bedarf vergrößern.

    Ich hab die Seite noch nicht online. Aber die CSS und eine Bsp.-HTML war im Anhang gerade mein ich. Reichen die CSS und die eine Seite? Alle Seiten sind gleich aufgebaut.

    hab jetzt ein wenig rumprobiert...

    Naja, leider ist mir nicht bekannt ob es möglich ist ein übergeordnetes <div> zu vergrößern wenn ein untergeordnetes zu groß ist...

    Habs jetzt nicht hingekriegt, die einzige möglichkeit die mir jetzt einfällt wäre JS :X


    //SO

    Musst aber deiner colright noch die id="colright" verpassen.
    Bei content2 die height: angaben alle rausnehmen bis auf min-height.

    Ahja, nach der navi hast du dein <p> tag zu schnell geschlossen (</p></ul> vertauschen)

    <body id ="global" onload="Test()">

    Einmal editiert, zuletzt von Grevas (5. August 2009 um 17:37)

    Funzt! Super, danke. Hab wirklich null Ahnung von Javascript und habs halt komplett ohne probiert.

    Hab jetz nur noch ne Blockade, wie ich den Impressumslink unter content2 bekomme.

    Eigentlich ja:

    Code
    <div id="content2">
      <div class="colright"><h2>...</h2><p>...</p></div>
      <div class="colleft">...</div>      
</div>
<div id="impressumlink">...</div>

    so, aber der setzt den Link immer mitten ins DIV und nicht darunter. Nur ne Kleinigkeit in der CSS oder wieder JS nötig?

    wenn du die Struktur beibehalten willst ja.

    Allerdings kannst es dir "einfacher" machen:

    HTML
    <div id="content2">
        <div class="colright"><h2>...</h2><p>...</p>
            <div id="impressumlink">...</div>
        </div>
      <div class="colleft">...</div>      
</div>

    Dann musst du noch beim #impressumlink top:400px; in top:40px; z.B. abändern ;) dann gehts.

    Indem nutzt du jetzt dein altes Problem aus ;) da content nicht größer wird, wenn ein unterelement rausgeht (gehört ja nicht mehr zu colright sondern ist wieder n neuer div -> colright wird nicht vergrößert)
    /P.S: WAAH, vergessen: du musst noch position: relative; machen statt absolute bei deinem link.

    Einmal editiert, zuletzt von Grevas (5. August 2009 um 18:26)

    Es läuft. Besten Dank.

    Macht ja auch Sinn aber manchmal ist halt Hirnblockade.

    Ganz andere Frage. Der IE blockiert bei mir zunächst das JS und so ist er vermutlich bei vielen eingestellt. Also sieht die Seite nach Murks aus, bis ich JS manuell aktiviere. Gibt es eine Möglichkeit, über die DOCTYPE z.B. die Seite auch beim IE auf Anhieb vernünftig aussehen zu lassen?

    Zitat von Grevas


    /P.S: WAAH, vergessen: du musst noch position: relative; machen statt absolute bei deinem link.

    wenn ich das mach, denn rutscht der Link aber beim FF nach links und ist beim IE ganz verschwunden. warum relative?

    Weil du ohne JS keine absoluten koordinaten setzen kannst...

    IE: ja seh ich auch grad ... Der link ist schon da - nur unterhalb der seite :D *seufz* . Allerdings geht bei mir JS im IE (standard einstellung).

    FF: Ich weiß nicht warum er bei dir nach links rutschen sollte 8| bei mir siehts ganz ok aus.

    Also als Hotfix für den IE kannst du deinem #impressum noch ein padding-bottom: 25px; verpassen... dann ist es allerdings auf dem hellen hintergrund :X (und zwar in beiden browsern)


    Alles andere (wie z.B. das loswerden vom JS) ist nach meinem Wissen ne umarbeitung des ganzen... Wenn du die 2 columnen brauchst - kannst es in eine tabelle packen... damit würde sich dein content2 div auch automatisch ausdehnen *behaupt*.

    Nja vllt weiß jemand anders einen rat, ich bin überfragt

    JS lösung:

    HTML
    function Test()
 {
 
var divHeight = ((document.getElementById('colright').offsetHeight));
document.getElementById('content2').style.height = divHeight+ 'px';
document.getElementById('impressumlink').style.top = divHeight + 20 + 'px';
 }

    und den div:

    HTML
    <div id="content2">
        <div class="colright"><h2>...</h2><p>...</p></div>
	<div class="colleft">...</div>
	<div id="impressumlink">...</div>
</div>

    2 Mal editiert, zuletzt von Grevas (5. August 2009 um 18:51)