On Thu, 09 Jul 2009 22:01:39 +0200, Paweł Piskorz wrote:

> G.Suss pisze:
>> Próbuję napisać coś, co do czego nie jestem przekonany, czy jest
>> wykonalne. Jest obrazek - wyśrodkowany w poziomie względem body - do
>> którego z lewej strony przylegać ma div o stałych wymiarach. Koncept
>> ilustruje "rycina":
>>
>> . .
>> . +-----+----------------------+ .
>> . | div | | .
>> . +-----+ | .
>> . | img | .
>> . | | .
>> . | | .
>> . | | .
>> . +----------------------+ .
>> . .
>
> HTML:
> <div class="imageWrapper">
> <img />
> <div class="box">
> tu jestem
> </div>
> </div>
>
> CSS:
> div.imageWrapper {
> display:inline;
> position:relative;
> zoom:1; /* dla badzIEwia */
> }
>
> div.imageWrapper img {
> vertical-align:top;
> }
>
> div.box {
> position:absolute;
> top:0;
> right:100%;
> }

Nie do końca, bo założenie jest takie, że img ma być wyśrodkowany. Poza
tym top absolutny też nie wchodzi w grę, bo takich elementów na stronie
ma być więcej, jeden pod drugim.

Na razie wykoncypowałem coś takiego - niezbyt eleganckiego:

HTML:

<div class="wrapper">
<div class="box">box</div>
<img />
</div>

CSS:

.wrapper {
display: table;
margin: 10px auto;
clear: both;
}

.box {
float: left;
background: red;
width: 100px;
height: 50px; /* wymiary sztywne - przykladowe */
position: relative;
left: -50px; /* polowa szerokosci dla wysrodkowania obrazka*/
}

.wrapper img {
float: left;
position: relative;
left: -50px; /* jw. */
}

W FF i Operze wygląda to tak jak chcę. IE6 (innych nie sprawdzałem) nie
chce wyśrodkować i nie mam pojęcia, jak go zmusić.