[CSS] div przyklejony do boku div'a wyśrodkowanego

Głowię się nad takim problemem:

mam div #container który się centruje w poziomie ekranu. I muszę do jego prawego boku dokleić div #right-col, który będzie poza centrowaniem.

A więc typowy błąd: robię "super-container" który się centruje, w niego pakuję #container z float: left i #right-col z float: right. Źle - całość jest szersza o #right-col i wpływa na wycentrowanie #container (przesuwa go naturalnie w lewo).

Rozwiązanie "nie do końca" - w kodzie wpierw umieszczam #right-col z float:right, a za nim #container z position: relative i margin: 0 auto. Wtedy #container jest dobrze wycentrowany, ale #right-col jest co prawda z prawej, ale dojeżdża do prawej krawędzie okna i tu się już gubię.

Wcześniej miałem rozwiązanie z ujemnym prawym marginesem dla #right-col, ale to nie działa w IE :(.

Za wszelką pomoc będę dźwięczny [browar] .

roSzi napisał(a)

#right-col jest co prawda z prawej, ale dojeżdża do prawej krawędzie okna i tu się już gubię.

Jeśli chcesz, by #container był wycentrowany (tak jakby #right-col nie istniał), a #right-col był z jego prawej strony, to -- aby #right-col nie wyszedł poza prawą stronę okna -- musisz mieć zarówno po prawej, jak i po lewej stronie #containera tyle miejsca, by #right-col tam się zmieścił. Tak jest z samej definicji tego, co chcesz osiągnąć. #container ma być wyśrodkowany, więc po jego lewej i prawej stronie musi być tyle samo miejsca (taka jest definicja poziomego wyśrodkowania). Żeby po jednej z tych stron zmieścił się #right-col, to po drugiej też musi być tyle miejsca, żeby się zmieścił. Tylko że to miejsce pozostanie niewykorzystane.

Możesz w kodzie umieścić najpierw #container, potem #right-col w myśl zasady, że treść idzie pierwsza. I dać im obu float: left. Następnie wyśrodkować normalnie #super-containera. Ale w tym momencie do wyśrodkowania liczy się też szerokość #right-col, więc #container ląduje za bardzo z lewo. Aby to zniwelować, daj #super-containerowi position: relative i ustaw wartość left równą połowie szerokości elementu #right-col (w pikselach).

Ale tak jak mówiłem, żeby #right-col się mieściło, to musisz mieć odpowiednią ilość miejsca zarówno po prawej, jak i po lewej stronie...

Dzięki za odpowiedź. Z miejscem po prawej i po lewej nie ma problemu, strona jest raczej mała. Głównym problemem było właśnie to, żeby #right-col nie wpływało na wyśrodkowanie kontenera, nie wliczało się do jego pozycji.

Udało mi się rozwiązać to w ten sposób:

• żadnego super-container, tylko #container i #right-col
• #container centruje
• #right-col daje float: right; right: -(szerokość #right-col)px;
• #right-col pakuje na poczatek #container.

Działa nawet w IE 6 :).