Div Tags

[Newbie44]

Hallo,

ich hab mich jetzt mal genauer mit Div tags, also CSS gestaltung beschäftigt, jedoch verstehe ich eines noch nicht, wenn ich mehrere Div Tags verkappsle, sprich in einanderschreibe, und wenn ich dann in einen verkappselten Div Tag was anfüge, dann wird der überdivtag nicht vergrößert, siehe bild

Wie kann ich das einstellen das wenn ein div tag größer ist als der andre, das der überdivtag dann automatisch der größe angepasst wird?

gruß und danke

Sebastian

[SirThornberry]

Hast du es schonmal in einem anderen Browser probiert? Das verhalten ist von Browser zur Browser verschieden. Geh ich recht in der Annahme das du es bisher mit Mozilla versucht hast?

[Die Muhkuh]

IMHO darfst Du dem Überdivtag kein height mitgeben. Dann wird das automatisch größer.

[Balu der Bär]

Zeig mal bitte deinen Code.

[Newbie44]

jupp ihr habt recht, hab es bislang nur mit mozilla probiert gehabt, werde es nachher nochmal im IE probieren, ich hänge mal ein stück vom Code an damit ihr seht wie die sachen bislang aussehen

Code:

<div class="option" id="Trenner">
    

 <div id="nav" style="float: left; padding: 10px; width: 150px; background: rgb(220,230,220); border: 1px solid silver;">
    

</p>
    </div>
<div id="content" style="float: left; margin-left: 15px; padding: 10px; width: 300px; border: 1px solid silver;">
    

</p>
    </div></p>

das problem dabei is das die ID Trenner immer gleichgroß ist, den Stylesheet hab ich extra nicht angehängt, vielleicht kann mir ja jemand helfen das Trenner immer so groß ist das eben Content reinpasst

[Newbie44]

Habs jetzt mal ohne Height probiert, geht auch irgendwie nicht, aber es müsste doch eigentlich gehen das ich die tags ineinander verschachtle und das das der äußere tag durch andre tags vergrößert wird wenn man platz braucht

[alcaeus]

Deine divs floaten und sind somit komplett ausm restlichen Model ausgenommen; ein umschliessendes block-Tag wird sich nicht vergroessern wenn die floating divs zu gross sind und deshalb rausragen.

Greetz
alcaeus

[Newbie44]

aja stimmt wenn ich das float wegmache dann sind sie drinnen und werden der größe angepasst, schon komisch, aber dafür is jetzt natürlich die unterteilung weg, sprich links und rechts, es gibt unmengen möglichkeiten für CSS, jedoch ist es ziemlich schwierig da durchzublicken, gibts denn noch ne möglichkeit die sachen aufzuteilen, sprich nach links und rechts so wie in dem bild ganz oben?

hab schon auf dieversen seiten geguckt die sich mit html beschäftigen, aber es werden nie alle funktionen komplett erklärt

DAnke schon mal im vorraus für eure hilfe

[Thorben77]

Häng mal hinter die floatenden Blöcke noch einen leeren Block mit clear: both an, das(s?) dürfte helfen

Und ersetz mal bitte diese gräßlichen

</p> durch Zeilenumbrüche (
bzw. bei XHTML
)

[Daniel G]

Zitat:

Zitat von Newbie44

hab schon auf dieversen seiten geguckt die sich mit html beschäftigen, aber es werden nie alle funktionen komplett erklärt

de.selfhtml.org sollte in diesem Fall deine Bibel sein. Solls so aussehen:

http://de.selfhtml.org/css/layouts/a...tig_breite.htm

Wenn ja, dann findest du den Code hier:

http://de.selfhtml.org/css/layouts/m...tm#zweispaltig

@Thorben: Na, welches "das" isses denn? :mrgreen:

[Newbie44]

das problem is wenn ich das so wie im ersten link mache und dann was verändere z. B. die linke spalter kleiner oder größer mache dann is die auch auf einmal irgendwie weg, sprich es überlappt schon wieder so wie am ersten bild im 1. beitrag

[Newbie44]

so ich hab jetzt nochmal den entwurf davon erstellt:

Code:

<div id="Div" style="border:thin; clear:both">Test
  <div id="Links" style="float:left; border:medium">Test1</div>
  
  <div id="Rechts" style="float:right; border:thin" >Test1</div>
</div>

das problem ist die ID Links und rechts ist nicht im großen drinnen, das is ja eigentlich meine frage, wie bekomme ich die zwei so in den div tag Div das Div automatisch so groß gemacht wird wie man ihn braucht?

[S2B]

Code:

<div id="Div" style="border:thin; clear:both">Test
  <div id="Links" style="float:left; border:medium">Test1</div>
  
  <div id="Rechts" style="float:right; border:thin" >Test1</div>
  <div style="clear: both"></div>
</div>

:wink:

[Newbie44]

Wow vielen dank, das so eine kleine Zeile gleich soviel ausmacht hätte ich nicht gedacht, es funktioniert tatsächlich.

Also nochmal vielen herzlichen Dank

[Thorben77]

Zitat:

Zitat von Daniel G

@Thorben: Na, welches "das" isses denn? :mrgreen:

Das mit einem s ?! :gruebel:

[Daniel G]

Zitat:

Zitat von Thorben77

Zitat:

Zitat von Daniel G

@Thorben: Na, welches "das" isses denn? :mrgreen:

Das mit einem s ?! :gruebel:

:hello: :wink: