Wrapper div nem nyulik meg fuggolegesen

Internet: PHP, CGI, stb.

Az a problemam, hogy van egy kb. ilyen felepitesu kodom: 


<div id="content-wrapper">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>

Az ehhez tartozo css ugy nez ki, hogy a #content float: left; a #sidebar meg float: right. A gond, hogy a sidebar (es ezzel a wrapper div) baromira nem akar egyutt noni a content-tel, megall ott, ahol a sidebar meretenek a hatara van, majd bejon az "alattuk" levo cucc hattere.

Amit neztem mar: height sehol nincs allitva semmire, xmllint lefut, tehat lezaratlan element sincs a kornyeken sehol. Mi az atok baja lehet?

Reszben megoldva: megvan az overflow: auto, viszont 1 px-el kisebb a content-wrapper sidebar oldali resze, mint kene. Erre otlet?

Hat... erre nem tudok mit mondani, keves vagyok hozza, mint mackosajtban a brummogas. Naszoval, az lett a megoldas, hogy a content-wrapper-nek kellett egy 1px magas border-bottom -ot adni, ami ugyan nem latszik, mert a content ramaszik, meg a sidebar is szerintem, szoval ettol fuggetlen a content-wrapper valahogy ettol rendes meretu lett. Fura.

PS: megint nem magamtol vagyok okos, innet puskaztam.

  • 1396 megtekintés

( hakosh | 2010. 10. 06., sze – 02:17 )

Azzal én is szívtam már, hogy ha van egy változó magasságú div-em, akkor a szülő div nem magasodik vele együtt. Ez miért van?
Szintén megvoltak a float: left; miatt szétcsúszkáló div-ek, aztán nagy volt a boldogság, amikor megtaláltam a clear: both; -t. Amúgy így hirtelen nem tudom elképzelni, hogy hogyan működik a megoldásod. Az miért nem elég, hogy a content-wrapper alatti div-re beállítod a clear: both; -t?

html: 

<div id="content-wrapper">
    <div class="main-content float-left">
        <div class="main-content-real">
             Tartalom
        </div>
    </div>
    <div class="main-sidebar float-right">
        <div class="main-sidebar-real">
              Tartalom
        </div>
    </div>
    <div class="clear"></div>
</div>

css: 

.clear{ clear: both; }
#content-wrapper{ width: 980px; background-color: #dfdfdf; }
.main-content{ width: 640px; background-color: red; overflow-x: hidden; }
.main-sidebar{ width: 240px; background-color: blue;overflow-x: hidden; }
.float-left{ float: left; }
.float-right{ float: right; }

Eleg, csak lesz egy felesleges div elemed. Az overflow: auto, vagy overflow: hidden a wrapper diven ugyanezt csinalja.Amennyire ertettem a magyarazatot, arrol van szo, hogy a bongeszo a tisztan float-olt tartalom miatt keptelen kiszamolni az elemek pontos magassagat, ezert inkabb nem is tori magat. Ez egyebkent nagyon szepen latszik is, adj csak egy kis keretet a wrapper divnek, es nem fogja keretezni a tartalmat. A clear: both megoldas azert mukodik, mert az nem floatolt cucc, es a bongeszo tudja, hogy az ala mindenkeppen le kell menni, vagyis - mivel az az utolso elem - szepen be is tudja loni a sajat meretet.

Az overflow is talan azert tud mukodni, mert azt mondod neki, hogy ne gondolkodjon hatarozott meretekben, csak rajzoljon, aztan majd lesz valami.

Ez a border-top -os dolog is valami ilyesmi lehet, a sidebar ugye automatikusan meretezodik, de valahogy nem kepes pontosan meghatarozni a meretet, es egy picit kisebb lesz, mint kene. A border rajzolas miatt viszont maskepp renderel/szamol a brozer, es valoszinuleg ezert lesz a ketto egalban.

PS: amikor kerdeztem, meg nem tudtam ezeket. Azota lettem ilyen okos.
-- 


Ki oda vagyik, hol szall a galamb, elszalasztja a kincset itt alant.