[wa666ou]

Oskab keegi kaasa rääkida, kuidas lahendada järgmist lehe laotust.
Pilt:


Küsimus on just selles 100% laias osas, kus keskel on pmst container nt 1000px lai, mille sees omakorda nt 290px fiks laiusega div ja paremal fluid div.
Fluid divi sees on nt pildislaider või google kaart.

Endal mõte kokku jooksnud.

Leht on responsive.
HTML võiks olla:

header

[Redikate]

Olemasolevast HTML'ist fiddlet ei viitsi visata?
http://jsfiddle.net/

Oleks natuke lihtsam probleemist aru saada / seda lahendada.

E: Mõtled midagi sellist?
http://jsfiddle.net/52VtD/1509/

[wa666ou]

Näiteks selline: http://jsfiddle.net/Tt4E8/6/

Aga see fluid div peaks minema nö välja containerist.

Nagu ka ütlesin, siis ei pea tingimata selline HTML olema.
Võib-olla on "õige" lahendus hoopiski midagi muud.


Sinu toodud näide on midagi muud ja tolle lahendusega polekski küsimust.
Mul vaja saada fluid div konteinerist välja.

[Redikate]

Reaalne vajadus jääb arusaamatuks.

containerist väljas olev div on ka ju ekraanilt väljas. Kui sul on vaja disaini mõttes selline "ääred on lehelst eemal efekt" saada, siis tee ülejäänud lehte väiksemaks.

http://jsfiddle.net/52VtD/1510/

või siis midagi sellst:
http://jsfiddle.net/52VtD/1512/

[wa666ou]

Reaalne vajadus aga ongi.
Üks mockup disaini mõttest

Spoiler

[Redikate]

Vaata mu viimase posti 2 näidet. Üks neist võiks sobida nagu.

Su pilt ei andnud eriti reaalsele vajadusele põhja.
Misasi sul seal lehelt välja minema peaks? Või mis sellel disaninil viga on nagu? Selle disaini saab minu kõige esimese näitega. Content div on lihtsalt 8 mitte 12.

[wa666ou]

Teine näide jah pmst, aga ma ei saa kasutada mingeid konkreetseid "margin-right:-250px", sest sõltuvalt resost peab too paremalt minema nö lõpuni.
Tundub, et ikkagi on JS lugu.

[Redikate]

Ei saa üldse aru mida sa saavutada tahad.

Sinu pildi saab html'i väga kenasti ju, milles probleem?
Esimeses postis oli antud väga konkreetne px number ka muidu selle vasaku osa jaoks.

Ja misasi sul seal pildil containerist välja läheb, mitte midagi ju?

Anna mulle täpne pilt (mockup) milline disain peaks olema.
Võid PM'i ka panna vms.

[wa666ou]

Vaata nüüd seda Bootstrapi kujunduse pilti.
See left ja fluid on keskele tsentreeritud konteineri sees.
Joon jookseb kui vaatad päist või sisu.
St mõtteline tsentreeritud konteineri piir on ikkagi sign-in nupust all tõmmates.
See kaart aga läheb sealt välja.

Ehk siis:
konteiner on nt 1000px lai, keskel tsentreeritud. Selle sees on 2 divi: vasak ja parem.
Vasak div on 300px lai.
Järelikult parem on 1000-300 = 700px lai.
Aga mul on vaja, et parem oleks ikkagi rohkem, kui 700px

[Redikate]

Kas sul on vaja täpselt sinu antud pildile vastavat html'i?

(mis oleks imelik, sest see pilt on juba tehtud ju valmis html'ist...)

[j2mm]

Oled juba probleemile lahenduse leidnud?

Jõudsin puhtas css-is soovitud tulemile, riputan ka mingi hetk üles.

[wa666ou]

j2mm, jõudsin arusaamisele, et JSiga peab lahendama

[j2mm]

Saab ka ilma, ehk kulub marjaks ära

http://jsfiddle.net/LVx24/

[wa666ou]

j2mm, väga vinge. Uurin lähemalt.

Testitud.
Chromes töötab, IE10 ok. Firefox aga näitab valesti.

[j2mm]

Viskasin ka ise just pilgu peale, table-cell'i sees ei tööta millegipärast relative ja absolute positioning, samuti ei võta table-cell'i järgi 100% laiust.

edit: Väike workaround ja töötab ka Firefox'is: http://jsfiddle.net/j2mm/LVx24/3/
Aga see-eest tekib endiselt FF-is .relative class'i lisamisel .cell'i sisse liikuva laiusega kasti kohale ebastandardne tühimik.

[wa666ou]

Kui nüüd vähendada lehe laiust, tekib ka skroll.
Ja nt Bootstrapiga tuleb kaasa selline reegel, mis puhul nt padding on nö sissepoole ehk siis vana box model ei toimi, kus padding oli väljaspool elementi: