[CSS] Äußere div passt sich nicht an innere an

Dieses Thema im Forum "Webdesign" wurde erstellt von t-low, 24. November 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 24. November 2009
    Äußere div passt sich nicht an innere an

    hi ho...
    Ich habe folgendes Problem... Ich habe eine große div #page, diese hat einen farbigen hintergrund, sie beinhaltet mehrere innere divs, #navi, #search und #content mit anderen hintergründen...
    das ganze funktioniert auch top, so lange der inhalt von #content nicht zu lang wird. Die Äußere div (#page) passt sich nämlich in ihrer länge nicht der inneren an... (was mich wundert ist, dass sie das schon mal getan hat, ich aber irgendwas geändert habe, sodass sie es nicht mehr tut.. ich finde den fehler aber nicht)

    hier etwas code.. ich hoffe ich hab alles relevante und mir kann jemand helfen;
    Code:
    #page {
     width: 900px;
     min-height: 650px;
     background-color: #0000FF;
     position: relative;
     margin: auto;
     }
    
    #content
     {
     padding: 5px;
     width:740px;
     min-height: 400px;
     float: right;
     border: solid thin #CCCCCC;
     background-color: #FFFFFF;
     margin: 20px;
     margin-top: 0px;
     font-size: 12px;
     }
    
    
     

  2. Anzeige
    Heute: Deals & Sale mit stark reduzierten Angeboten finden.
  3. #2 24. November 2009
    AW: Äußere div passt sich nicht an innere an

    deine css gefällt mir aus mehreren gründen nicht so gut. sie ist zwar nicht falsch aber ich würde folgendes ändern:

    Code:
    #page {
     width: 900px;
     [S][COLOR=Red]min-height: 650px;[/COLOR][/S] 
     background-color: #0000FF;
     [S][COLOR=Red]position: relative;[/COLOR][/S]
     margin: auto;
     }
    
    #content
     {
     padding: 5px;
     width:740px;
     [S][COLOR=Red]min-height: 400px;[/COLOR][/S]
     float: right;
     border: solid [COLOR=Red][S]thin[/S]1-3px[/COLOR] #CCCCCC;
     background-color: #FFFFFF;
     margin: 20px;
     margin-top: 0px;
     font-size: 12px;
     }
    erklärung: min-height wird nicht von allen browsern untersützt! --> andere lösugn suchen! (quelle: http://www.css4you.de/min-height.html)
    wozu position:relative wenn du ein margin: auto hast? das positioniert es doch automatisch mittig? also wozu relativ?
    borders solltest du grundsätzlich in px angeben. das führt sonst auch zu unstimmigkeiten der verschiedenen browser!

    wodran es nun jedoch liegt das das äußere div nicht mit wächst kann ich dir nicht sagen! könnte an den position: relative liegen würde aber meine hand nicht für ins feuer legen!

    poste doch mal den code ausschnitt wo du die klassen ineinander schachtelst! hast du vielleicht direkt in den <div tags nen style="" angegeben?

    hoffe konetn helfen.

    greeze wurmi
     
  4. #3 25. November 2009
    AW: Äußere div passt sich nicht an innere an

    Was du probieren könntest wäre
    a) das position relativ bei #page rausnehmen
    b) der höhe einen Wert/prozentwert geben.

    Falls keine änderung:
    Poste mal dein CSS und HTML-Konstrukt
     
  5. #4 25. November 2009
    AW: Äußere div passt sich nicht an innere an

    erstmal schon mal danke für eure antworten...

    relative rausnehmen funzt nicht...

    um die im ersten post genannten unschönheitne kümmer ich mich, wenn ich mal mehr zeit hab...

    einen wert für height: 1. ich hatte ja noch nie einen und das ging ja schon mal
    2. was sollte man da nehmen
    3. Ich hab grad mal 90% ausprobiert, da ist die div # page komplett verschwunden (der Hintergrund)

    hier mal das ganze konstrukt (das wesentliche)
    HTML:
    <div id="page">
     <div id="header">
     <!--Enthält normalerweisse header-->
     </div>
     <div id="left">
     <div id="search">
     <!--enthält sonst suchfeld-->
     </div>
     <div id="navi"> 
     
     <!--hier ist das menue-->
     </div><!--ende menue-->
     </div><!-- ende der linken div-->
     <div id="content">
     <!--hier ist der inhalt-->
     
    
     </div> <!--ende von content-->
    </div><!--ende von #page-->
    
    
    Ich denke, das hilft hier aber auch nicht weiter, oder...
    die css von dem linken bereich, navi und menue sollte unwichtig sein, denke ich


    Edit:

    Kann das nicht auch am min-height liegen... das bezieht sich ja auf die größe des ELTERN Elementes...

    Aber wie umgeht man so was... ich hatte da vorher einfach height stehen und das ging.. dann auf einmal nich mehr :(
     
  6. #5 25. November 2009
    AW: Äußere div passt sich nicht an innere an

    min-height wird seit ie 7 von allen gänigen browser unterstützt. wer mit nem ie6 unterwegs is hat selber schuld. ie8 kam/kommt ja sogar schon via windows-update.

    der "fehler" liegt in "float: right;"

    setz drunter einfach folgenden code:
    HTML:
    <div style="clear:both;"></div>
    und dein äußeres div wächst wieder mit.

    so:

    HTML:
    <div id="page">
     <div id="header">
     <!--Enthält normalerweisse header-->
     </div>
     <div id="left">
     <div id="search">
     <!--enthält sonst suchfeld-->
     </div>
     <div id="navi"> 
     
     <!--hier ist das menue-->
     </div><!--ende menue-->
     </div><!-- ende der linken div-->
     <div id="content">
     <!--hier ist der inhalt-->
     
    
     </div> <!--ende von content-->
     <div style="clear:both;"></div> <!-- umfließen beenden -->
    </div><!--ende von #page-->
     
  7. #6 26. November 2009
    AW: Äußere div passt sich nicht an innere an

    Wunderbar.. jetzt funzt alles..
    Was mich nur wundert, ist, dass es ja auch schon mal ging und da war float ja auch da.. hmm.. naja egal, hauptsache es klappt, danke schön

    ~closed~
     

  8. Videos zum Thema
Die Seite wird geladen...
Similar Threads - CSS Äußere div
  1. Antworten:
    0
    Aufrufe:
    1.735
  2. Antworten:
    3
    Aufrufe:
    1.790
  3. Antworten:
    1
    Aufrufe:
    1.343
  4. Antworten:
    2
    Aufrufe:
    1.747
  5. Antworten:
    2
    Aufrufe:
    1.655