HTML/CSS Problem mit CSS - DIV verrutscht in anderes DIV

[m7media]

servus,

ich möchte einen chat machen, jedoch hab ich derzeit probleme beim gestalten.
Der chat soll ganz einfach sein: Oben ein 200px großes DIV welches einen Scrollbalken enthält sobald der inhalt über 200px groß ist, darunter ein DIV welches die eingabe-felder enthält. hier mal wie ich es hab:

<DIV id='sbp'>
**Hier die Nachrichten**
</DIV>
<DIV id='form'>
**Hier die Eingabefelder**
</DIV>

dazu das CSS:

#form 
{

	height: 20px; 
	background: #fff;
}
#sbp 
{
	width: 100%; 
	max-height: 200px; 
	overflow: auto; 
	background: #fff;
	
}

jedoch rutscht das Formular-DIV immer in das Nachrichten-DIV, d.h man muss erst im Nachrichten-DIV nach unten scrollen damit es erscheint, aber es soll ja einfach darunter stehen. Was mache ich falsch?

 

[SuNr1s3]

1. divs klein schreiben
2. in beide float:left einfügen
3. in dein form div clear:left einfügen

... sollte das problem lösen

 

[m7media]

Danke für den post, jedoch keinerlei veränderung.

#form 
{

	height: 20px; 
	background: #fff;
	clear:left;
        float:left;
}
#sbp 
{
	width: 100%; 
	height: 200px; 
	overflow: auto; 
	background: #fff;
	float:left;	
}

meintest doch so?

 

[SuNr1s3]

Zeig mir am besten mal den gesamten Quelltext, oder schick mir nen Link per pn

Wieso hat form eigentlich kein width bei dir?
Du könntest noch probieren bei sbp max-height wieder hinzuzufügen (Das normale height stehen lassen sonst funktionierts nicht!), und ein margin-top:XXpx; einbauen .

 

[tobomator]

ein position:relative würde vll auch mal etwas zum nachdenken sein.