✔ Div Boxen im Container werden nicht nebeneinander dargestellt

M

mäks

Mitglied
Hey ;)


Also ich stehe gerade vor dem Problem dass ich eine Homepage machen will, und das ganze in einem Wrapper gepackt habe. Also Wrapper ist die ganze Box und in ihr drinnen befinden sich verschachtelte Boxen... Vielleicht hilft der code weiter ;)

index.php

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
	   
	   
	<html>
	<head>
	
		<link rel="stylesheet" type="text/css" href="index.css">
	
	</head>
	
		<body>
			
			<div id="wrapper">
				<div id="top">
					<div id="top_navi">
					</div>
					<div id="top_banner">
					</div>
				</div>
				
				<div id="bottom">
					<div id="bottom_content">
					</div>
					<div id="bottom_stats">
					</div>
				</div>
			
			</div>
		</body>
	   
	
	   
	 </html>

und dazu noch das stylesheet

index.css

Code: 
html
{
	font-family: Impact;
	font-size: 15px;
	padding-top: 50px;
}

#wrapper
{
	border-top: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 4px solid;
	margin: 0 auto;
	padding: 10px;
	width: 920px;
	min-height: 1000px;
}

#top
{
	border: 1px solid;
	width: 900px;
	height: 400px;
	padding: 10px;
}

#top_navi
{
		background: black;
		width: 900px;
		height: 50px;
}

#top_banner
{
	background-image: url("banner.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	width: 900px;
	height: 300px;
	padding-bottom: 50px;
}

#bottom
{
	border: 1px solid;
	width: 900px;
	min-height: 600px;
	padding: 10px;
}

#bottom_content
{
	border: 1px solid;
	width: 700px;
	min-height: 500px;
	padding: 10px;
}

#bottom_stats
{
	border: 1px solid;
	width: 50px;
	min-height: 500px;
}

ich glaube das is leichter zu verstehen ;)

Ja und ich stehe jetzt vor dem Problem dass die Box #bottom_stats unter der Box #bottom_content liegt... jedoch will ich die box nebeneinander haben!

Was kann ich da tun ? ich will jetzt keinen code von euch sondern nur eine Denkhilfe oder einen guten Tipp mit was ich da arbeite bzw was ich falsch gemacht habe.

danke schon mal ;)
 
So hab das Problem mittlerweile selber gelöst ;)

ich habe jetzt die eine box #bottom_content float: left; und die #bottom_stats auf float: right gemacht!


;)
 
1 Problem besteht aber noch immer! wenn ich die #bottom- boxen jetzt befülle oder größer dimensioniere gehen diese über den wrapper!

was kann man da dagegen machen?
 
Wenn ich deine bottom-Boxen in der Breite ändere, gehen die natürlich über den Wrapper, weil er in der Breite auf 920px begrenzt ist. Das ist auch vernünftig. Wenn man in der Höhe die Dimension ändert, hat dies keine schlechten Auswirkungen, da der Wrapper sich automatisch streckt.
Wenn du deine Box beispielsweise mit einem Bild befüllst, sollte kein Problem entstehen, da die breite statisch ist.
 
ich hab jetzt durch nen freund erfahren dass man am besten, wie in meinem problem beschrieben, die #bottom box genau so wie die anderen boxen floaten sollte und dann darunter ein clear: both machen soll damit auch das ganze mitwächst... aber wieso macht man das gibts da keine andere lösung will jetzt nicht sagen saubere oder vernünftigere eher eine etwas verständlichere ;)
 
yukini hat gesagt.:
Wenn ich deine bottom-Boxen in der Breite ändere, gehen die natürlich über den Wrapper, weil er in der Breite auf 920px begrenzt ist. Das ist auch vernünftig. Wenn man in der Höhe die Dimension ändert, hat dies keine schlechten Auswirkungen, da der Wrapper sich automatisch streckt.
Wenn du deine Box beispielsweise mit einem Bild befüllst, sollte kein Problem entstehen, da die breite statisch ist.
Zum Vergrößern anklicken....

was mir da noch einfällt ist ja in der breite ist mir klar das der drüber geht doch in die höhe nicht... da hats nicht funktioniert darum hab ich dann mal alle gefloatet und somit sind sie 1. neben einander gewesen und 2. auch den wrapper zum wachsen verholfen falls die anderen boxen höher werden^^
 
Maks hat gesagt.:
das der drüber geht doch in die höhe nicht...
Zum Vergrößern anklicken....
Das verstehe ich nicht. Bei mir hat es in der Höhe funktioniert, da der Wrapper auf min-height gesetzt ist. Somit ist er nicht in der Höhe begrenzt.
Float benutzt man für alle Boxen, die nebeneinander erscheinen sollen.Für die Boxen, die eh nicht nebeneinander passen, spielt das "float" kein Rolle.
Ein clear Container wird verwendet, damit keine Eigenschaft von den zuvor benutzten Boxen geerbt wird. Es wird also bereinigt. Manchmal jedoch hilft nicht mal das weiter. :(
 
yukini hat gesagt.:
Das verstehe ich nicht. Bei mir hat es in der Höhe funktioniert
Zum Vergrößern anklicken....
Dann waren bei dir nicht die erwähnten float-Regeln für die beiden DIV-Blöcke #bottom_content und #bottom_stats im Spiel, die nicht unter-, sondern nebeneinander ausgerichtet sein sollen.

Oder hast du dies lediglich im IE getestet? Er verhält sich hier nicht, wie die übrigen Browser.

Was geschieht, wenn dieser Umfluß nicht ordnungsgemäß mit einer clear-Regel beendet, und so wieder für den normalen Textfluß gesorgt wird, hat Maks beim Namen genannt, und kannst du dir auch gerne in meinem gestrigen verlinkten Beitrag näher anschauen.

Demnach wird der DIV-Block #bottom, der die beiden umfließenden DIV-Blöcke enthält, wie folgt ergänzt:
HTML: 
<div id="bottom" class="clearfix">
CSS: 
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
 
.clearfix {display:inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
 
Zuletzt bearbeitet:
@spicelab:

Ich glaube, ich habe mich nicht deutlich genug ausgedrückt.
Den HTMl Code und denn CSS Teil habe ich 1:1 copiert und mit den Infos aus dem folge Thread von Maks ergänzt (float eingebaut). Nachdem ich die Divs #bottom_content und #bottom_stats in der Höhe variiert habe, hat sich der Wrapper automatisch mitgezogen. Also war nichts überlappt, weil der Wrapper in der Höhe flexibel ausgelegt ist!

Btw: clear habe ich noch nie so kompliziert definiert.
Ich schreibe immer:
.clear{clear:both;}
Das reicht meistens auch immer. Aber wenn deine Methode hilft, ist es ja auch in Ordnung :D
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück