[HTML/CSS] Div Box verändert sein größe nicht

[TheTricker]

Hi Leute,

baue gerade an meiner neuen Website und habe folgendes Problem:

Hab meine Seite mti div-Boxen aufgebaut. Das funktioniert auch alles super im Zusammespiel mit CSS. Wenn jetzt allerdings der Inhalt einer div-Box so groß wird, dann wird diese größer aber die umgebende Box nicht. Das bedeutet aber, dass nur die mittelre Box weitergeht und ds sieht dann echt komisch aus:

http://www.kiri-parties.de/?content=1

Folgender Code in der index.php:

<div id="around-center">
	          <div id="main">
			<div id="left">
                         </div>";

		<div id="middle">
                    ...
		</div>
                <div id='right'>
               </div>
        </div>
</div>

Und meine CSS-Datei (Ausschnitt):

body
{

	height: 100%;
}

html
{
	height: 100%;
}
#around-center
{
	width:100%;
	background-color: #404040;
}

#main
{
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	background-color: #575757;
	border-top: 1px solid #FF7F24;
	min-height: 1000px;
	height: 100%;
}

#middle
{
	float: left;
	margin-right: 2px;
	margin-left: 2px;
	margin-top: 10px;
	width: 560px;
	height: 100%;
	/*border: 1px solid #FFFFFF;*/
	background-color: #575757;
}

Im IE wirds ja sogar richtig angezeigt, also tippe ich irgendwie auf die Höhen-Angaben, da die ja immer unterschiedlich interpretiert werden.

Vielen Dank schonmal für eure Antworten

Jonas

 

[Zweipunktnull]

AW: [HTML/CSS]Div Box verändert sein größe nicht

Gib main die Eigenschaft overflow: hidden

 

[threadi]

AW: [HTML/CSS]Div Box verändert sein größe nicht

Sollen die divs immer über 100% gehen? Wenn ja müsstest du bei "around-center" auch "height: 100%;" setzen. Wenn nein: entferne mal alle "height: 100%;" und auch "min-height", welches sowieso nur im Firefox und Opera funktioniert.

 

[TheTricker]

AW: [HTML/CSS]Div Box verändert sein größe nicht

Danke für eure Antworten, aber leider führe sie nicht zum Erfolg. Wenn ich overflow auf hidden setze, dann verschiebt sich der komplette main block nach rechts, soll heißen die navi bleibt, aber der Rest ist komplett verschoben.

Wenn ich alles auf height: 100% setze, dann bringt das nix und wenn ich alles weg mache, auch das min-height dann fehtl die Hintergrund-Farbe vom main!

Was jetzt?

 

[Zweipunktnull]

AW: [HTML/CSS]Div Box verändert sein größe nicht

Poste deinen kompletten Quelltext, damit ich das bei mir mal selbst angegucken und bearbeiten kann.
Edit: Nein, lass es, ich kopiere hin grad von den Website.

Edit2:
Hab's. Du musst neben main auch einfach noch around-top die Eigenschaft overflow: hidden geben. Dann geht's.
Aber räum mal da in deinem Quelltext auf.
Generell gilt: So wenig Boxen wie möglich.
Und außerdem willst du doch ein CSS-Layout machen. Wieso gibts denn dann darin noch so viele table, tr und td? Alles rausschmeißen.

 

[TheTricker]

AW: [HTML/CSS]Div Box verändert sein größe nicht

Hab das mit overflow hidden im around-center schon probiert, ging nicht. Werde das dann aber morgen nochmal probieren.

Zu den tables: Macht es für mich in bestimmten Dingen einfacher. bin halt noch ncih so drin, aber hast schon recht.

 

[Zweipunktnull]

AW: [HTML/CSS]Div Box verändert sein größe nicht

>> Hab das mit overflow hidden im around-center schon probiert, ging nicht.

Lies nochmal, was ich geschrieben habe.

 

[TheTricker]

AW: [HTML/CSS]Div Box verändert sein größe nicht

OK, das war natürlich mein Fehler! Jetzt geht es mit overflow: hidden bei main und around-top.

Aber wieso? Könntest du viell noch zwei Sätze loslassen, was für Auswirkungen das hat. Ich bin nicht derjenige, der sagt: "Hauptsache es läuft"

Danke für die Hilfe auf jeden FAll schonmal!

 

[Zweipunktnull]

AW: [HTML/CSS]Div Box verändert sein größe nicht

overflow: hidden ist (meiner Meinung nach) die "Wunderwaffe" in CSS. Sehr viele Probleme lassen sich damit lösen. overflow: hidden erzeugt einen sogenannten Block Formatting Context. Und dieser Block Formatting Context verursacht halt viele nette Dinge, zum Beispiel, dass darin float und clear "lokal" wirken oder dass alle float-Boxen eingeschlossen werden und der Container automatisch vergrößert wird.

 

[TheTricker]

AW: [HTML/CSS]Div Box verändert sein größe nicht

So ganz habe ich das noch nicht durchschaut, aber den Trick werde ich mir auf jeden Fall merken!

Vielen Dank für deine Hilfe!

 

[Adagio]

Anstatt eine "Wunderwaffe" zu benutzen, würde ich eher einfach simpel via CSS clearen

http://www.positioniseverything.net/easyclearing.html

 

[TheTricker]

Toll, dass du nochmal geantwortet hast. Vielleicht ist das gar keine schlechte Idee, da man ja sonst immer nur Umwege gehtl WErde mir den Artikel auf jeden Fall mal anschauen!

Danke

 

[Zweipunktnull]

Um genau zu sein, ist clear eher der Umweg. Du musst nämlich immer noch ein extra Block-Element zusätzlich einbauen, die du eigentlich gar nicht benötigen würdest.

<div>
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="ueberfluessiges_block_element" style="clear: both"></div>
</div>

Außerdem wirkt ohne overflow:hidden alle clear's immer für das ganze Dokument. Das ist eigentlich eher selten im Sinne des Erfinders.

EDIT

Ich lese gerade, wie der Artikel dieses Problem umgehen will.

Since IE/Win does not support the :after pseudoclass, we must rely on its "auto-clearing" effect, but that behavior only happens when the clearing element has a dimension applied to it. In many cases it's undesirable to use either a height or a width, but happily the Holly hack comes to our rescue. This hack lets IE/Win and only IE/Win see a simple 1% height for the container. How does that help? Well, IE/Win happens to have another spec violation that causes all boxes to expand and enclose all content, regardless of any stated dimensions that may be smaller! So that 1% height will just be expanded to whatever value is needed to contain the float, and the mere fact of applying a dimension triggers the "auto-float-enclosing" behavior. Cool eh?

Die Eigenschaft height:1% bewirkt im MSIE<7.0, dass ein Block Formatting Context erzeugt wird.
(Okay, es heißt hasLayout und unterscheidet sich ein bisschen, aber das ist erstmal nicht relevant.)
Mit anderen Worten: Der Artikel macht genau das, was ich vorgeschlagen habe plus clearing.
Was daran jetzt simpler sein soll, weiß ich nicht.
Der Artikel macht's sich nur unnötig schwer.

style="overflow: hidden; height: 1%"
Funktioniert in allen Browsern, man benötigt keine unnötigen HTML-Elemente, der CSS Code ist wesentlich kürzer...
Ich würde meine Lösung benutzen.