✔ Floatbox rutscht unter die navigartion

[zeiflex]

Hallo,
ich habe ein Problem. Ich habe das 3-Spalten-Layout, welches zentreiert ist, aus dem tutorial nachgebaut, aber mich auf 2 Spaten beschränkt. Die Rechte habe ich entfernt. Ich benutze Websitebaker als CMS aber das ist ja eigentlich egal, nur wenn ich jetzt eine Seite aufrufe (Termine und Gästebuch) wird, rutscht der Text oder die Box immer unter die Navigation. Also die Box wird imemr s weit nach utnen verschoben, dass die da anfängt wo die Navigation aufhört. Ich hoffe ihr könnt mir helfen. Die seite: http://www.andres-web.de
Hier meine CSS datei:

* { /* Mit dem Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
	margin: 0;
	padding: 0;
}
body {
	text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
	background-color:#FFCC33;	
}
div {
	text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}
/* DIV-Boxen */

div#wrapper {
	width: 1000px;
	margin: 0 auto;
	border: 2px solid #000;
	background-image:url(images/bg.jpg);
	background-repeat:repeat;
}
div#head {
	width:100%;
	height: 151px;
	background-image:url(images/head.jpg);
	background-repeat:no-repeat;
	border-bottom: 2px;
	border-bottom-color: #000;
	border-bottom-style: solid;
	text-align:right;
	line-height: 0;
}
div#navi {
	float: left;
	width: 200px;
	background-image:url(images/navi_bg_kasten.jpg);
	border: 2px solid #000;
	border-left: 0;
	border-top: 0;
	margin-bottom: 10px;
}
div#foot {
	font-size:12px;
	text-align:center;
	color: #000;
}
div#content {
	margin: 0 0 0 200px;
	padding: 5px;
	padding-left: 20px;
}
/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
	content: ".";
	display: block;
	height: 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 */

/* navigation */
div#navi ul {
margin: 0;
padding: 0;
list-style: none;
}

div#navi a {
text-decoration: none;
text-align: left;
display: block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */
margin: 5px 0 0 0;
font: bold .8em verdana, sans-serif;
color: #000;
}


div#navi ul#nav li a:link,div#navi ul#nav li a:visited {
width: 180px; /* Grafik-Breite */
line-height: 31px; /* Grafik-Höhe */
background-image: url(images/navi_bg.jpg); /* Pfad zum Hintergrundbild */
background-repeat:repeat-x;
border: 1px solid #2e2d2e;
padding-left: 3px;
}

div#navi ul#nav li a:active, div#navi ul#nav li a#current, div#navi ul#nav li a:hover {
padding-left: 10px;
width: 173px;
color:#666;
}

Achja, es werden auch immer noch auf den einzelnen Seiten immer noch wieder Stylesheets deklartiert (nennt mans so?).

Ich hoffe ihr versteht wie ich das alles meine.
MfG
Andy

 

[Maik]

Hi,

kannst du mal die "Floatbox" beim Namen nennen?

 

[zeiflex]

Immer die, die man gerade im Content hat. Wenn man auf der Seite Termine ist, ist es die box mit der class="action_details". Die "untere" von den drei.

 

[Maik]

Ohne die clear:both-Deklaration wird die Box neben der Navigation ausgerichtet:

.action_details {
                color: #000000;
                float: left;
                /*clear: both;*/ /* auskommentiert = deaktiviert */
                margin-top: 10px;
                width: 598px;
                height: 240px;
                border: 1px solid #5A5A5A;
                overflow: auto;
        }

 

[zeiflex]

danke hat geklappt. Super echt!!