Zentrieren von 2 left floats mit variablem content float

[js2002]

Hi,

ich hab eine Seite, die gerade aus aus #wrap und #wrap-right besteht.

Hier die css:

Code: Alles auswählen

    background-color: #FFFFFF;
    border-radius: 20px 20px 20px 20px;
    float: left;
    margin: 0 auto;
    min-width: 750px;
    padding: 20px;
    width: 70%;

und die für rechts:

Code: Alles auswählen

    float: left;
    margin-top: 20px;
    width: 175px;

Das ganze möchte ich nun zentrieren und zwar so, dass sich der #wrap dynamisch zum #wrap-right anpasst.
Ich habe es so versucht:

- alles durch einen <div> "einklammern". Dann margin: 0px 3% 0px 3%
Das klappt auch, wird aber nicht 100%ig zentriert
Da bleibt immer was frei, weil 70% +175px wohl nie 100% sind bzw nur ein einem Fall. (da wo die 175px 30% entsprechen, wenn man auch noch weiss wieviel man für die paddings usw abziehen muss)

Hat jem einen Tipp pder möchte mit firebug mal rumprobieren?
http://chefsache.bplaced.net/forum/

[js2002]

Wie auf diesem Bild deutlich zu erkennen:

http://dl.dropbox.com/u/31225678/Screen ... 8%20AM.png

der Abstand links und rechts ist keinesfalls 10%

Erst wenn ich paddings entferne und eins auf 70 und das andere auf 30% setze, dann klappt es, sieht aber sch***** aus.

http://dl.dropbox.com/u/31225678/Screen ... 1%20AM.png

[Pyramide]

Mir ist noch nicht ganz klar, was das Ziel sein soll. Meinst du sowas wie http://de.selfhtml.org/css/layouts/anze ... _links.htm nur Spiegelverkehrt?

[js2002]

Im Grunde ja, der Text im Contentbereich soll sich halt variable an dem Sponsorbereich schieben.
(Bei dem Versuch, das umzudrehen, bekomme ich genau die gleichen Probleme)

Ich hätte nun eine Lösung, die ist aber hässlich:
Wenn ich alles in eine table einrahme, und der links 70% gebe, nutz die rechte Seite den Rest, egal wie gross. Somit wäre die Lücke immer geschlossen.
Aber da man table nicht mehr nimmt, hab ich das mit einem div Rahmen versucht, da hab ich dann aber das Problem, dass sich der rechts nicht dynamsich ausbreitet (wie es bei der table der fall wäre: stichwort * oder "keine Breitenabgabe".

Im Grunde ist das Problem: mit 2 "eingerahmen" divs bekomme ich die 100% nicht voll. Ich kann dem einen div 70% zuteilen, aber dem anderen dann nicht *%. Da muss ich dann auch 30% nehmen. Wenn ich dann aber noch paddings brauche, veruscht der float. Oder gibt es * Notation doch irgendwie bei divs?

[Crizzo]

Hi,

vorausgesetzt ich verstehe dich richtig:

- du hast links oder rechts, spielt für die Technik keine Rolle, eine Spalte die 175px breit ist und die 2. Spalte sollte dann immer den Rest zu 100% ausfüllen.

Sieht dann ungefähr so aus:

Code: Alles auswählen

<div id="wrap">
  <div id="banner">Der ist nur 175px breit.</div>
  <div id="content">Er füllt den Rest zu 100% auf </div>
</div>

CSS dazu:

Code: Alles auswählen

#wrap { margin: 0 auto; width: 90%; }
#banner { float: left; width: 175px; }
#content { margin-left: 175px; }

Da sich Block-Elemente ohne "float" und "width" immer so viel Platz nehmen wie möglich, dehnt sich das div#content über die volle Breite aus und wird nur nach links für die margin-left: 175px eingeschränkt. Wenn es nach rechts soll, musst du natürlich das margin und float nach rechts ausrichten.
#wrap wird dann einfach per margin-left: auto und margin-right: auto zentriert und nimmt 90% der Breite seines Elternelements ein.

Grüße
Blackhawk

[js2002]

Nicht ganz. Ich habe es so:

Code: Alles auswählen

<div id="Rahmen" style:"margin-left:10%; margin-right:10%">   <- Zentrierung

<div id="wrap"> <- Spalten 1 und 2, also Navigation und Content 
  <div id="nav">Der ist zb 200px breit.</div>
  <div id="content">der soll den Rest vom wrap füllen, also 100%-200px (wie geht das?)</div>
</div>

<div id="wrap-rechts"> <- Spalte 3, Banner
  <div id="banner">175px breit</div>
</div>

</div>

Die CSS dazu bekomme ich nicht hin bzw. es sieht immer Mist aus.
Wenn ich dem wrap 75% geben und dem wrap-rechts 25% darf ich keine paddings mehr verwenden, weil wrap-rechts durch float nach unten rutscht, weil 75%+25%+ die Paddings eben > 100% sind. Prozemtual kann ich die Paddings nicht machen (wirkt bescheuert)

Neue Idee? wrap nochmal einzelnd "umrahmen" und die paddings dann im subrahmen machen, also im wrap. Bessere Idee?

[Crizzo]

Das kannst du doch analog übertragen.

#nav und #content ist wie mein #banner und #content mit dem #wrap drumherum. Und dein #wrap verhält sich zu #wrap-rechts wie mein #content zu #banner.

#Rahmen kannst du dann per margin: 0 auto; zentrieren.

[js2002]

Danke!

Ich musste das float right "Objekt" in der html Struktur VOR das #wrap setzen.

Code: Alles auswählen

#wrap-rechts
    float: right;
    width: 175px;

Code: Alles auswählen

#wrap
    margin-right: 175px;
    min-width: 600px;
    padding: 30px;

Wie man hier sieht, funzt es soweit.
[ externes Bild ]

Aber:

Ich nutze für #wrap (der Teil links) eine Mindestbreite von 600px, weil es sonst komisch aussieht.
Dann passiert folgendes: Der "test" String überlagert, den #wrap.
1. Idee dazu?

EDIT: overflow ist falsch. position:fixed geht, dann verschwindet es dahinter. Aber dann funzen andere Sachen nicht mehr, wie das 100% auffüllen.

FUCK!
Wenn ich da sehr viel Text in dem Banner packe, wird der Header vom #wrap immer höher und höher.
Erst wenn der Test rechts zuende ist, kommt auch links die Navi und der Content Bereich.
[ externes Bild ]

mit overflow:hidden, geht das weg, weiss aber nicht warum, da ist wohl irgendwie html kram zu weit nach rechts kommen oder so, ka genau.

[Crizzo]

Machs doch einfach so, wie ichs dir gesagt hab.

Wenn du es alleine nicht hinbekommst, dann lad doch mal ein Testcase hoch, wo man sich das anschauen kann.

Testcase = kein PHP, CSS im <head>, kein unnötiger Inhalt, nur eine HTML-Datei wo man sieht wie du versuchst die Element so zu platzieren, wie du es gerne hättest.

[js2002]

Wie Du oben sehen kannst.
Ich hab es so gemacht wie Du gesagt hast.
Ich habe es analog auf float right umgestellt.

Hier mal nen Testcase:

Code: Alles auswählen

<div id="all" style="margin: 0px 10% 0px 10%;background-color:000000;padding:0px;height:500px">
<div id="right" style="z-index:-2;width:175px;background-color:ff0000;float:right;text-align:center;margin:0px 0px 0px 0px;">rrrrrrrrrrrrrrrrrrrrdd ddddddddddd rrrrr rrrrr rrrrr rrrrr rrrrr rrrrr</div>
<div id="left" style="position:relative;min-width:300px;overflow:hidden;float:none;background-color:ff6600;;margin:0px 175px 0px 0px;">lllllffffffffffffffffff fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffllllllffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff  fffffffffffffffffffffffffffffffffffllllllfffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffff  fffffffffffffff fffffffffffffffffffffllllllfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffl</div>

  </div>

Funzt super, aber das muss ich dann wohl alles mit ins Original einbauen: zB dieses Position relative, den z-index usw.