CSS Floating Problem

Dave.ch · #1 (**permalink**) 19.11.2007, 16:15

Hallo

Ich arbeite gerade an einer Umsetzung eines Layouts mit CSS und bin gerade auf einige Probleme gestossen. Ich habe ein kleines Beispiel vorbereitet, dass mein Problem verdeutlichen soll:

Code:

<body>
  <div id="navigation">...</div> 
  <div id="content">...</div>
</body>

Code:

div#content {
	margin-left: 200px;
	background: #ccc;
}

div#navigation {
	background: #eee;
	width: 200px;
	float: left;
	height: 400px;
}

Soweit funktioniert das Ganze ja auch. Wenn man nun aber in den Inhalts-Bereich (div#content) z.B. dieses CSS-Formular (erst bestes Resultat bei Google: css-form) einfügt, wird das ganze Layout verunstaltet. Ich sitze im Moment total auf der Leitung und habe keine Ideen wie ich das Problem lösen soll.

Hat jemand eine Idee?

Dave

Crizzo · #2 (**permalink**) 19.11.2007, 16:41

Das Problem ist wahrscheinlich folgendes: Der div#content ist ein Element im normalen Fluß. In ihm befinden sich nun "floatende" Elemente, doch diese dehnen deinen div#content nicht aus.

Dazu findest du genug Infos unter FAQ Punkt2: http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html

Dave.ch · #3 (**permalink**) 19.11.2007, 16:59

Tut mir leid falls ich mich ein wenig unklar ausgedrückt habe. Das Problem ist nicht, dass sich div#content nicht ausdehnen würde. Im CSS des Formulars sind einige Elemente mit clear:both versehen. Dadurch verschieben es die danach folgenden Elemente nach unten, an die Stelle an der div#navigation aufhört.

Wie kann man dieses "hinunterrutschen" verhindern?

Crizzo · #4 (**permalink**) 19.11.2007, 17:01

Gib uns mal deinen ganzen Code!

Dave.ch · #5 (**permalink**) 19.11.2007, 17:16

Gut, ich habe eine Zip-Datei angehängt. Getestet habe ich das ganze mit Firefox 2.0.

Crizzo · #6 (**permalink**) 19.11.2007, 17:18

http://xhtmlforum.de/40080-f-r-frage...twortende.html Danke. Ausnahmsweise:

Code:

/** from http://www.css-tutorials.de/fileadmin/tutorials/form/form.html **/

/*fix default browserspaces between elements*/
* {
	padding:0px;
	margin:0px;
}
body {
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
	padding: 10px;
}

h1 {
	font-size: 14px;
	font-weight:bold;
	background:#F4F4F4;
	display:block;
	padding:5px;
	border-bottom: 1px dotted #333;
	margin-bottom:10px;
}
a:link, a:visited, a:active {
	color: #666666;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #333333;
}
label {
	float:left;
	clear:none;
	display:block;
	width:100px;
	margin-bottom:10px;
	padding-left:10px;
}
input, textarea, select {
	float:left;
	display:block;
	width:250px;
	border: 1px solid #333;
	background:#F4F4F4;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	margin-bottom:10px;
	padding:1px;
}

/*clearing all floats and fix firefox and ie backgroundcolor-bug */
div.clearer {
	clear:both;
	font-size:1px;
	line-height:1px;
	display:block;
	height:1px;
} 
form {
	background:#EFEFEF;
	width:400px;
	border: 1px dotted #333;
}
.form-button {
	margin-left:110px !important;
	margin-left:55px; /*to fix ie6 position*/
	width:100px;
}
.option {
	border:none;
	background:none;
	width:auto;
}
fieldset {
	border:none;
	padding-left:100px;
	padding-bottom:10px;
	display:block;
	float:left;
}
fieldset input {
	width:auto;
	border:none;
	background:none;
	float:left;
	display:block;
	margin-right:10px;
	margin-top:3px !important;
	margin-top:0px; /*to fix ie6 position*/
}
fieldset label {
	width:auto;
	float:left;
	display:block;
	padding-right:2px;
	white-space:nowrap; /*to fix ie6 wrapping*/
}

Deine form.css

So gehts. "clear" war teilweise überflüssig.

Dave.ch · #7 (**permalink**) 19.11.2007, 19:18

Ich danke dir vielmals, und ich werde in Zukunft versuchen meine Beiträge besser zu formulieren!

Dave.ch · #8 (**permalink**) 23.11.2007, 12:27

Tut mir leid, dass ich den Beitrag noch einmal ausgraben muss, aber ich habe mich ein bisschen zu früh gefreut.

Da das Layout später mit einem CMS verwendet werden soll, müssen Navigations- und Inhaltsbereich in der Höhe dynamisch anpassbar sein. Ich habe zu diesem Zweck noch einmal an meinem Beispiel, diesmal jedoch mit der neuen form.css von Blackhaws, rumgespielt: Wenn ich z.B. div#navigation auf die Höhe 600px setze, fällt das Ganze wieder auseinander (Screenshot).

Was kann ich hier machen?

Crizzo · #9 (**permalink**) 23.11.2007, 12:36

Kompletter Code?

Dave.ch · #10 (**permalink**) 23.11.2007, 13:11

CSS Test

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
CSS Problem Design auf anderen Rechnern verschoben	MALPI	CSS	3	09.10.2008 10:51
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript	chrisol_76	CSS	2	21.07.2008 17:37
Css und Steam Problem	justinlenz	Offtopic	3	27.03.2008 21:58
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04