div mit float zentrieren?

[wolf360]

Okey folgendes Problem:

ich will einen Div-Container zentrieren der bereits in einem Div-Container enthalten ist.

so eigentlich klappt auch alles, doch sobald ich bei dem "innneren" div die angabe float mach, zentriert er den Container nicht mehr....?

gruß wolf360

 

[Gelöschtes Mitglied 3007]

du sollst mit float ja auch net zentrieren sondern mit margin: 0 auto; oder ähnlichen hilfsmitteln ;) ^^

 

[neuroleptika]

Schreib mal ein Beispielcode.
Ich verstehe nicht ganz was du erreichen willst.

 

[wolf360]

also gut z.B:
css:

#gesamtinhalt{
width: 1024px;
margin: auto;
text-align:center;
}

#inhalt{
height:				571px;
width: 				554px;
background-color: 		orange;
float:				left;
}

#navigation{
   width:250px;
   height: 600px;
   background-color: black;
   margin: auto;
   float: left;
}


}

html

<div style="gesamtinhalt">


<div id="navigation">

</div>

<div id="inhalt">

</div>

</div>

so hoff diesmal is es verständlich?

hab mit float, die navigation und den Inhalt nebeneinander gesetzt, blos dann zentriert er es nicht....

 

[Gelöschtes Mitglied 3007]

joa... und? xD pack nen div drum rum, oder mach den vorhandenen einfach kleiner der hat ja schließlich keine hintergrund grafik oder hintergrundfarbe also

nebenbei hast du per style="gesamtinhalt" auf .gesamtinhalt verwiesen und nciht auf #gesamtinhalt xD

 

[wolf360]

geht auch nicht....

ich habs schon so probiert:

body{
background-color: 		white;
}


#gesamtinhalt{
width: 1024px;
margin: auto;
text-align:center;
}

#mitte{
margin: auto;
text-align:left;
}

#inhalt{
height:				571px;
width: 				554px;
background-color: 		orange;
float:				left;
}

#navigation{
    width:250px;
   height: 600px;
   background-color: black;
   margin: auto;
   float: left;
}

<div id="gesamtinhalt">

<div id="mitte">

<div id="navigation">

</div>

<div id="inhalt">

</div>
</div>


</div>

 

[neuroleptika]

Ich hab das html mal um einen Tag (hr) erweitert:

<div id="gesamtinhalt">
<div id="navigation">
</div>
<div id="inhalt">
</div>
<hr />
</div>

id=gesamtinhalt enthält nur gefloateten Inhalt.
Sie schweben praktisch nur unter der Oberkannte von id=gesammtinhalt.
Setze mal ein rahmen um id=gesammtinhalt. Dann siehst du was ich meine.

Das ändert man mit clear:

  #gesamtinhalt {
width: 1024px;
margin: auto;
text-align:center;
border: 1px solid #000000;
}

/*Internetexplorer brauchen eine Höhenangabe zum clearen:*/
* html { /*für IE5 - IE6 */
height: 1%;
}

* +html { /*für IE7*/
min-height: 1%;
}

#inhalt{
height:    571px;
width:     554px;
background-color: orange;
float:    left;
}

#navigation{
   width:250px;
   height: 600px;
   background-color: black;
   float: left;
}

hr {
visibility : hidden;
clear: both;
height: 0px;
padding: 0px;
margin: 0px;
border: 0px;
}

Jetzt ist es in allen Browsern ab IE5 zentriert.
Und du kannst nun id=gesmmtinhalt eine Hintergrundfarbe geben, was ohne clear nicht möglich war.
Optisch gleich lange Spalten sind so auch kein Problem mehr.

Hab noch was vergessen:
Der IE5 und 5.5 versteht margin auto nicht.
Dafür behandeln alle IE text-align falsch:

body {
text-align: center;
}
  #gesamtinhalt {
width: 1024px;
margin: auto;
text-align:left;
border: 1px solid #000000;
}
.........

 

[wolf360]

also Opera zentriert das immernoch nicht....-.-"

 

[neuroleptika]

also Opera zentriert das immernoch nicht....-.-"

Doch:
http://css-spalten.red-rod.net/test/center.htm

Opera9 1280x1024 screenshot:
http://css-spalten.red-rod.net/test/opera9center.png

Mit welcher Auflösung hast du dir es denn angesehen?

 

[wolf360]

also ich benutz Opera und es wird nichts zentriert....-.-"

also der Gesamtinhalt mit dem Schwarzen rahmen wird scho Zentriert...

aber die Navigation und der Inhalt halt net...-.-"

 

[neuroleptika]

Zentriert wurde id=gesammtinhalt
Und die war 1024px breit.
Navigation und Inhalt zusammen aber nur 804px.

Ich hab id=gesammtinhalt jetzt ebenfalls auf 804px gesetzt:

 #gesamtinhalt {
width: 804px;
margin: auto;
text-align:left;
}

Jetzt hab ich wohl verstanden was du meinst.
Oder?
http://css-spalten.red-rod.net/test/center.htm

 

[wolf360]

jope jetzt hats geklappt, danke für die hilfe!!!