Div-Tags in passender Größe

[Basti]

Hi,
ich habe heute mit div-Tags angefangen um endlich von Tabellen-Layouts wegzukommen.
Bisher habe ich alles gut verstanden und bin auch sehr zufrieden, das Tutorial dazu war sehr gut erklärt und einfach.

Allerding habe ich jetzt ein Problem beim Verschachteln von einigen div-Tags bekommen. Ich wollte in die Content-Box auf der einen Seite ein die Navigationsleiste mit einer Box für die Links und dann noch eine für Counter usw. Auf der rechten Seite sollte dann der eigentliche Inhalt kommen.

Hier der Code...

... in HTML:

Code: Alles auswählen

   <div id="content">
     <div id="navi_left">
        <div id="menu"> <a href="#">Startseite</a> <a href="#">Links</a></div>
      <div class="infos"> Besucher</div>     
     </div>      
      <div class="content_right">
        Inhalt
      </div>
    </div>


... in CSS

Code: Alles auswählen

#content
{
    height: 200px;
    margin: 0px;
   background-color: #8ba9c8;
}

#navi_left
{
    width: 150px;
    float: left;
}

#menu
{
    border: 1px solid #687e95;
    padding: 0px;
   margin: 0px;
   margin-top: 1px;
   margin-left: 5px;
   background-color: #cbd0d4;
}

#menu a:link, #menu a:visited {
   display: block;
   border-bottom: 1px solid #687e95;
   font-weight: bold;
   color: #76c500;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 4px;
}

#menu a:hover{
   background-color: #89e400;
   font-weight: bold;
   text-decoration: none;
}

.infos
{
   border: 1px solid #687e95;
    padding: 5px;
   margin-top: 5px;
   margin-left: 5px;
   background-color: #cbd0d4;
}

.content_right
{
    width: 730px;
    float: right;
    padding: 2px;
   margin-top: 1px;
}


Wenn ich jetzt in die verschiedenen Boxen Sachen eintrage, und diese sich dadurch höher werden, gehen die Boxen irgendwann über die Größe der zentralen Content-Box hinaus.
Aber ich möchte natürlich, dass die ganze Content-Box auch größer wird, sobald z.B. die Inhalts-Box an den Rand dieser stößt.
Gibt es dafür vielleicht eine variable Höhenangabe oder muss ich die Verschachtelung anders machen?

Wär toll wenn mir einer helfen kann...

[Manuel]

So und genau das ist die Stelle, wo ich außnahmsweise dann doch wieder zur Tabelle rate... *räusper* Also wenn ich dich richtig verstanden habe willst du 2 div-Layer nebeneinander gleich hoch haben. Das ist zwar möglich, aber meiner Meinung nach so umständlich und kompliziert, dass der Vorteil der div-Layer mehr als verloren geht, denn der Quellcode ist länger, schwieriger und kaum lesbar.

Lg,
Manuel

[Basti]

Ja, nicht direkt. Die 2 div-Layer nebeneinander können ruhig unterschiedlich groß sein.

Ich möchte nur, dass der Layer im Hintergrund (bei mir "content") die Größe automatisch ändert wenn die Navigationsleiste oder der Inhalt größer wird.
Denn bei mir hat der content-Layer ja einen Hintergrund, und die Höhe von dem soll sich dann den 2 in ihm verschachtelten Layern anpassen.

Ich hab zur Not auch keine Probleme mit etwas komplizierteren Quelltexten, hauptsache es funktioniert .

[chraebs]

Hey!

ich würde die "height" auf "auto" stellen und dann aber eine "min-height" angeben. somit hat die Content-div eine Mindesthöhe, vergrössert sich aber sobald mehr Platz benötigt wird.

Ich muss ehrlich sagen, bin mir nicht megr ganz sicher ob das klappt, sollte es aber theoretisch schon... zumindest im Fifo

[Basti]

Hey, danke. Mit height auf auto stellen hab ich's zwar schon probiert, aber ohne min-height
Theoretisch müsste das echt klappen.

Werd es sofort mal ausprobieren

//edit
Schade, klappt leider doch nicht. Wär wohl auch zu schön gewesen


Hat denn noch jemand anders eine Idee?

[Manuel]

Ich muss das Morgen wenn ich Zeit hab mal ausprobieren, denn ich kann mir gerade immernoch nicht so genau vorstellen was du nun gerne haben willst.

Aber ich teste deinen Code morgen einfach mal und dann schauen wir weiter. Wird sich schon eine Lösung finden.

[Basti]

Hier ist mal ein Screenshot auf dem ich die Elemente versucht habe zu markieren, damit ihr versteht was ich meine.

Danke, dass ihr euch so viel Mühe gebt mir zu helfen



Also nochmal das Problem: Wenn ich in den "content-right"-Layer soviel Inhalt schreibe, dass er die Höhe davon überschreitet, geht der Inhalt weiter nach unten und dann in meinen "footer" und verschiebt dort alles.

[Manuel]

Ich glaube das muss ich gar nicht testen...

Hat dein Footer ein "clear: both;" in der CSS-Klasse stehen? *g*

Denn wenn nicht, wunderts mich absolut nicht.

Lg,
Manuel

[Basti]

Ok, das hatte ich vergessen. Ich wusste nicht, dass das so wichtig sein könnte^^.
Jetzt geht der Text zwar nicht mehr in den Footer, aber der content-Layer vergrößert sich trotzdem noch immer nicht automatisch....

//edit
Hab's grad mal mit dem IE anzeigen lassen. Da ist das Problem nicht.
Anscheinend ist das wohl nur bei Firefox, aber ich hab keine Ahnung wieso. (also height ist "auto" und ich hab ne min-height angegeben)

[Manuel]

Kannst du mir deine Sache da mal kurz packen und hochladen? Momentan ist ja eh noch nichts, was andere "klauen" könnten oder? Sonst gib mir den Link per PN. Ist einfacher als jetzt Vermutungen anzustellen.

Lg,
Manuel

[Basti]

Schon passiert...

[Manuel]

Mach in deiner Klasse Content mal die Höhe weg, dann klappts.

Lieben Gruß,
Manuel

[Basti]

Also bei mir ist dann die einzige Veränderung, dass ich gar keine Hintergrundfarbe mehr habe...

[Manuel]

Mist, habs natürlich direkt gelöscht.

Kannst du mir nochma kurz den Link schicken?

[Manuel]

Und nochmal:

Code: Alles auswählen

<div style="clear: both;"></div>

Füg das bitte mal unter dem div-Layer für content_right ein, so dass es noch in content drin liegt. Dann klappts. Die Farbe weisst du dann einfach content zu, wie oben schon beschrieben. Man könnte das auch bestimmt ohne die Klasse content lösen, aber so ist es auch okay denke ich.