div float problem [html]

[janusz1200]

Witam, uprzejmie proszę o pomoc w wyjaśnieniu banalnej sprawy, bo czegoś nie kumam. Dlaczego background (border, cokolwiek) diva po prawej stronie ('na tytuł') jest wyświetlany na divie po lewej stronie?
Cały dzień zmarnowany...

Kod:

<div style="float: left; border: 1px #0000FF; width: 200px; height: 150px">na obrazki</div>
<div style="background: yellow; ">na tytuł</div>

Pozdrawiam i dzięki za odpowiedź

[Ancik]

Drugiemu też musisz nadać jakiś float. Div, który otrzymuje float, zostaje tak jakby wyjęty 'z pod prawa'. Przy deklaracji border: wypadałoby też określić typ obramowania (np. solid, czy tam dotted etc.).

Cały dzień zmarnowany...

Umiliłeś mi trochę wieczór tym dopiskiem

[mateo]

Cały dzień zmarnowany...

Zaoszczędził byś cały dzień, gdybyś najpierw nauczył się myśleć a potem bawił się w "robienie stronek".

[janusz1200]

Dzięki, @Ancik, za odpowiedź, choć nie jest prawidłowa. I z tym "wyjmowaniem z pod prawa", pozwól, że się nie zgodzę - float to jednak co innego, niż position (co do border, masz oczywiście rację).
Natomiast faktycznie, w dokumentacji stoi jak byk, że:

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats ...

A więc float faktycznie dotyczy WYŁĄCZNIE treści, o czym NIE MIAŁEM POJĘCIA.
W przypadku kodu, który podałem, należałoby ustawić margin drugiego diva na szerokość pierwszego, i grałoby.
Pozdrawiam
Janusz

[Ancik]

Owszem, jest prawidłowa (dopóki rozwiązuje problem, to jest prawidłowa). Najpierw pytasz o rozwiązanie dla takiej śmiesznej sytuacji, po czym sam wskazujesz inne. Wszystko zależy od tego, co w efekcie końcowym chcesz osiągnąć, o czym wspomnieć nie raczyłeś. Co było więc złego w moim rozwiązaniu?
Wystarczy, że poczytasz o overflow: hidden i zrozumiesz co miałem na myśli mówiąc o 'wyjęciu z pod prawa'.
Float dotyczy wyłącznie treści? Albo nie rozumiem o co ci chodzi, albo te dwa bloki to twój pierwszy kontakt z css.

[Kartofelek]

oczywiście janusz nie masz racji
rację ma ancik

Bo float wyjmuje z obiegu bloki, ale nie tak jak absolute. Coś jakby pomiędzy.
Aby się o tym przekonać, wystarczy wstawić floatowane bloki do wspólnego bloku, który ma tło. I tła nie będzie.

Co do samego marginesu też nie jest to prawdą, ale to już sam musisz sobie sprawdzić.

[janusz1200]

oczywiście janusz nie masz racji
rację ma ancik

Bo float wyjmuje z obiegu bloki, ale nie tak jak absolute. Coś jakby pomiędzy.
Aby się o tym przekonać, wystarczy wstawić floatowane bloki do wspólnego bloku, który ma tło. I tła nie będzie.

Co do samego marginesu też nie jest to prawdą, ale to już sam musisz sobie sprawdzić.

Ja tam tło widzę (zielone, blok obejmujący)

Kod:

<div style="border: 1px black solid; width: 95%; height: 150px; background: green;">
            <div style="float: left; border: 1px #0000FF solid;
                 width: 200px; height: 150px">na obrazki</div>
            <div style="background: yellow; margin-left: 200px; padding-left: 30px;">na tytuł</div>
      
        </div>

no i żółte (obcięte dzięki margin do właściwej pozycji).

---

[...] overflow: hidden [...]

E no, super, o to mi chodziło, i nie trzeba margin. Dzięki.

[Kartofelek]

Ale nie oszukuj ustawiając height na 150 =}. Prosimy bez height 150px. Przecież skoro nie są "wyjęte" z dokumentu, to normalnie powinny rozsunąć div obejmujący. Ałć. Kolejny dzień z głowy

[janusz1200]

Ale nie oszukuj ustawiając height na 150 =}. Prosimy bez height 150px. Przecież skoro nie są "wyjęte" z dokumentu, to normalnie powinny rozsunąć div obejmujący. Ałć. Kolejny dzień z głowy

Oj tam, oj tam, dopiero początek...