✔ Probleme mit rechter Floatbox

[TMG]

Hi Maik,

ich habe schon wieder ein plödes Problem, welches Firefix ( wie immer ) korrekt darstellt. Jedoch ist Bills Kind der Meinung, es muss aus der Reihe tanzen.

Es geht im die rechte DIV float Box... sie ist nicht so wie sie sein soll :-(
Schau es dir bitte mal beim Firefox und beim IE an.

Ich habe es schon mit "right: 25px" probiert.... aber es will nicht.
Vieleicht habe ich auch ein falsches Verständnis der Float-Boxen

Hier der Code

div#rightcontent {
	margin: 25px 25px 52px auto;
	width: auto;
	float: right;
    background-color:#FFFFFF;
	padding:5px;
	border: 1px dashed #A8A8A8;
	right: 25px;

}

Falls es an etwas anderem liegt, hier nochmal das gesamte CSS:

* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;

}

body {
color:#611416;
background-image:url(bilder/bg.jpg);
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */

}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%;
font-size:12px;
}

/* DIV-Boxen */

div#page {
position:relative;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
background-color:#E1E2FF;
}

div#header {
height: 142px;
background: #fff;
}

/*
div#topNavi {
top:113px;
height: 29px;
background: #fff;
}
*/

/* div#leftcontent {
margin: 25px 0px;
width: 105px;
float: left;
background-color:#;
padding:5px;
} */

div#rightcontent {
	margin: 25px 25px 52px auto;
	width: auto;
	float: right;
    background-color:#FFFFFF;
	padding:5px;
	border: 1px dashed #A8A8A8;
	right: 25px;
}

div#centercontent {
	vertical-align:top;
	margin: 25px 200px 52px 25px;
	background-color:#F0F1FF;
	padding:5px;
	border: 1px dashed #A8A8A8;
}

div#leftcontent, div#rightcontent, div#centercontent {

}

div#footer {
clear: both;
position: absolute;
bottom: 0;
height:auto;
width: 800px;
background: #fff;
border-top: 1px solid #b8b8b8;
}


/* clearfix zum Aufheben der Floatumgebung */

.hauptbox:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size:0;
}

img {
display:block;
}

.hauptbox {display: inline-block;}

/* Hides from IE-mac \*/
* html .hauptbox {height: 1%;}
.hauptbox {display: block;}
/* End hide from IE-mac */


/* Überschrift */

h2 {
margin-left: 10px;
}
a:link {
	font-weight: normal;
	color: #666666;
	text-decoration: underline;
}
a:hover {
	font-weight: normal;
	color:#687BD2;
	text-decoration: underline;
}
a:visited {
	font-weight: normal;
	color: #666666;
	text-decoration: underline;
}

Vielen Dank nochmal

 

[Maik]

Hi,

sieht nach dem "Doubled Float-Margin Bug" aus, bei dem der rechte Außenabstand verdoppelt wird.

Nimm daher mal display:inline in der Regel auf, und entferne right:25px wieder, da diese Angabe ohne die position-Eigenschaft eh keine Wirkung hat.

 

[TMG]

Perfekt. Es hat geklappt.
Aber ich habs auf nem Vista Rechner mit IE 7 probiert. Dort hat er es korrekt dargestellt.... komisch.

Nunja, nun funktioniert es und ich bin dir sehr dankbar.

Hier nochmal der geänderte Code:

div#rightcontent {
	margin: 25px 25px 52px auto;
	width: auto;
	float: right;
    background-color:#FFFFFF;
	padding:5px;
	border: 1px dashed #A8A8A8;
	display:inline;
}