Выплывающая до предела картинка

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

январь 2005


Задача.

Создать блок, выплывающий слева, но не далее заданной границы.

Как это выглядит в браузере

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
<style type="text/css">
    /* common styles */
    .float_from_left
    {
        position: relative;
        border: 1px solid red;
        overflow: hidden;
    }
    .float_from_left .first-child
    {
        position: absolute;
        right: 0;
        width: 100%;
    }
    .float_from_left .reducer
    {
        position: relative;
        width: 100%;
        left: 0;
    }
    .float_from_left .float
    {
        position: absolute;
        margin-right: 100%;
    }
    /* custom styles */
    #als_logo .first-child { min-width: 400px; }
    #als_logo .reducer {  margin-right: 400px; }
    #als_logo .float {           width: 400px;
        background: url('/;-)/als_logo.gif') black 100% 50% no-repeat;
    }
    #als_logo,
    #als_logo .first-child,
    #als_logo .first-child .reducer,
    #als_logo .float
    { height: 100px; }
</style>
<div class="float_from_left" id="als_logo">
    <div class="first-child">
        <div class="reducer">
            <div class="float"></div>
        </div>
    </div>
</div>