+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: div float problem [html] (/thread-div-float-problem-html)
div float problem [html] - janusz1200 - 27-04-2011
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ź
RE: div float problem [html] - Ancik - 27-04-2011
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.).
Cytat:Cały dzień zmarnowany...
Umiliłeś mi trochę wieczór tym dopiskiem
RE: div float problem [html] - mateo - 27-04-2011
(27-04-2011, 00:38)janusz1200 napisał(a): Cały dzień zmarnowany...
Zaoszczędził byś cały dzień, gdybyś najpierw nauczył się myśleć a potem bawił się w "robienie stronek".
RE: div float problem [html] - janusz1200 - 27-04-2011
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
RE: div float problem [html] - Ancik - 27-04-2011
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.
RE: div float problem [html] - Kartofelek - 27-04-2011
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ć.
RE: div float problem [html] - janusz1200 - 27-04-2011
(27-04-2011, 12:22)Kartofelek napisał(a): 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).
(27-04-2011, 04:37)Ancik napisał(a): [...] overflow: hidden [...]E no, super, o to mi chodziło, i nie trzeba margin. Dzięki.
RE: div float problem [html] - Kartofelek - 27-04-2011
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
RE: div float problem [html] - janusz1200 - 27-04-2011
(27-04-2011, 15:07)Kartofelek napisał(a): 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...