Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][html] Dwa floatujące divy, jeden 200px, drugi "reszta"
Forum PHP.pl > Forum > Przedszkole
varez
Witam,
Poszukuję rozwiązania tylko w css (o ile możliwe), żebym miał sobie dwa divy:
  1. #a, #b { float: left; }
  2. #a { width: 200px; }
  3. #b { }
  4. <div id="a">
  5. ble
  6. </div>
  7. <div id="b">
  8. ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble ble
  9. </div>

i ten drugi po prawej ma z pierwszym zawsze zajmować 100% szerokości strony, tylko ten po lewej ma mieć rozmiar na sztywno.
Mógłbym w przypadku zmiany szer. okna liczyć wszystko JS-em, ale nie chciałbym tego robić.
Jest to możliwe?
czy zostaje nieśmiertelna tabela?
agata
spróbuj rozłożyć to procentowo:

  1. #a {width: 20%} //to przykładowa wartość
  2. #b{width: 80%} // tutaj deklarujesz resztę szerokości


jednak i tak lepiej wrzucić to do kontenera

  1. <div id="all">
  2. <div id="a"></div>
  3. <div id="b"></div>
  4. </div>


Procenty i tak zawsze zostawią minimalny odstęp od bocznych krawędzi, wtedy rozwiązaniem "na siłę" jest :

  1. margin-left: -1%; // to musisz już sam pokombinować ile wystarczy
  2. margin-right: -1%;//jw
varez
ale ja nie chce procentami, procentami to bym potrafil sobie zrobic..
chce div o stalej szerokosci, a nie w 1280x800 200px a juz w fullhd ponad 300px

kontener dla tych divow jest
vokiel
@agata Ale jak procentowo, jak ma być na stałe 200px?

Oba bloki wrzucasz w kontener, który ma 100% szerokości.
  1. <style type="text/css">
  2. #container {width: 100%;}
  3. #left {float: left; width:200px;}
  4. #rigth {float: left; width: auto;} /* lub ustawić szerokość na 100% i lewy padding na 200px */
  5. <div id="container">
  6. <div id="left"></div>
  7. <div id="right"></div>
  8. </div>
varez
vokiel,
tak nie podziała.
wartość auto jest domyślna dla DIV, poza tym w3c mówi, że dla elementów z float musi być podane wartości width

dodatkowo sprawdziłem -> układa się jedno pod drugim jak tylko wypełnimy tekstem diva po prawej

druga wersja jeszcze dziwniejsza -> width 100% + padding, który wlicza się do długości? to już na pewno będzie jedno pod drugim..

ale tez sprawdziłem.. jest jedno pod drugim, a gratis suwak poprzeczny winksmiley.jpg


edit: jakby to bylo takie proste to bym nie przychodzil z tym na forum..
croc
Ciekawe kiedy CSS pozwoli w końcu na jakieś obliczenia arytmetyczne.
varez
też mi się marzy smile.gif coś podstawowego jest (albo to tylko rozszerzenie opery?) -- tj inna reguła jak szerokosc jest taka, albo taka, ale to nie to samo..
niby mozna kombinowac z display: table-cell, ale to juz i tak prawie tabela, a znowu IE tego nie załapie..

no nic, na tabeli chyba zrobie (ale pisac jak jest pomysl)
agata
musisz w kontenerze zdeklarować inline.

Jednak nadal musisz dać minusowe marginesy bo jak powiedziałam wcześniej 100% width nie równa się 100% okna przeglądarki, ew. musisz dać np. 101%

  1. <div id="all" style="width: 100%; background-color: #000; display: inline">
  2. <div id="left" style="width: 200px; float: left; background-color: #fff000">fdfd</div>
  3. <div id="right" style="width: auto; background-color: #eee444">fsf</div>
  4. </div>


kolory przykładowe do łatwiejszego określenia divów
pedro84
Masz gdzieś namieszane w stylu, bo sposób vokiel'a musi działać. Co Ci nie działa, jak robisz tym sposobem?
vokiel
@pedro84 jednak nie musi winksmiley.jpg

To powinno działać (u mnie na ff 3.6.3 działa)
  1. <style type="text/css">
  2. div {height: 200px; margin: 0px; padding: 0px;}
  3. #container {width: 100%;}
  4. #left {float: left; width: 200px; background: red;}
  5. #right {display: table-cell; margin-left: -200px; padding-left: 200px; background: green;}
  6. <div id="container">
  7. <div id="left">Test 1</div>
  8. <div id="right">test 2 test 2 test 2 test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2</div>
  9. </div>
croc
Cytat(agata @ 18.05.2010, 23:49:37 ) *
musisz w kontenerze zdeklarować inline.

Wątpię by to cokolwiek dało, ale chcę napisać coś innego. Twoje rozwiązanie jest maksymalnie nieeleganckie. Jak można dawać div-ovi właściwość inline?? Słyszałaś kiedyś o czymś takim jak <span> ?
agata
Cytat(croc @ 19.05.2010, 10:08:36 ) *
Twoje rozwiązanie jest maksymalnie nieeleganckie. Jak można dawać div-ovi właściwość inline?? Słyszałaś kiedyś o czymś takim jak <span> ?


eleganckie nie eleganckie działa...

co do span nie nie słyszałam w szkole byłam tongue.gif - chodziło o przykładowe przedstawienie rozwiązania więc nie czepiaj się szczegółów.
varez
vokiel, byloby fajne, ale dziura się robi na IE (każdym)..
i dziwne że to w ogole dziala na table-cell pod ie6.

ale generalnie bardziej paskudne od inline dla diva jest dodawanie ujemnych marginesow moim zdaniem.. no kurcze, pomyslcie, co to jest "margines"..

wiec nie wiem, cudowna poprawka dla ie plus ujemny margines, czy po prostu zwykla tabela ktora przynajmniej zadziała jak chce?
tehaha
użyj tabelki, ja rozumiem, że w dzisiejszych czasach użytkownicy stali się na nie uczuleni i unikają ich jak ognia, ale w takich przypadkach jak ten jest to bardzo dobre rozwiązanie i przynajmniej nie musisz się bać, że pod jakąś przeglądarką się rozwali
vokiel
Tabelki? Do dwóch div'ów? chyba żartujesz sobie...

IE jest kapryśne, irytujące. Tak działa też w IE v8 nawet v6, poza tym w Operze, FF, Chrome winksmiley.jpg
  1. <style type="text/css">
  2. html, body {margin: 0px; padding: 0px;}
  3. div {height: 200px; margin: 0px; padding: 0px;}
  4. #container {width: 100%;}
  5. #left {float: left; width: 200px; background: red;;}
  6. #right {margin-left: -200px; padding-left: 200px; background: green;}
  7. <!--[if IE]>
  8. <style type="text/css" media="all">
  9. #right {margin-left: 0px; padding-left: 0px;}
  10. </style>
  11. <![endif]-->
  12. <div id="container">
  13. <div id="left">Test 1</div>
  14. <div id="right">test 2 test 2 test 2 test 2test 2test 2test 2test
  15. 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test
  16. 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test
  17. 2test 2test 2test 2test 2test 2test 2</div>
  18. </div>
  19. </body>


Ale to wyżej to jakby hack na IE, myślę, że lepiej z pozycjonowaniem absolutnym. Też działa w każdej z w/w przeglądarek, a wygląda ciut lepiej, w dodatku bez tych ujemnych marginesów;)
  1. <style type="text/css">
  2. html, body {margin: 0px; padding: 0px;}
  3. div {height: 200px; margin: 0px; padding: 0px;}
  4. #container {width: 100%; position:relative;}
  5. #left {float: left; width: 200px; background: red;}
  6. #right {position: absolute; left: 200px; background: green;}
  7. <div id="container">
  8. <div id="left">Test 1</div>
  9. <div id="right">test 2 test 2 test 2 test 2test 2test 2test 2test
  10. 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test
  11. 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test 2test
  12. 2test 2test 2test 2test 2test 2test 2</div>
  13. </div></body>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.