[css][html] Dwa floatujące divy, jeden 200px, drugi "reszta" Opcje

[varez]

Witam,
Poszukuję rozwiązania tylko w css (o ile możliwe), żebym miał sobie dwa divy:

[HTML] pobierz, plaintext 
<style>
#a, #b { float: left; }
#a { width: 200px; }
#b { }
</style>
<div id="a">
ble
</div>
<div id="b">
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 
</div>
[HTML] pobierz, plaintext 

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:

[PHP] pobierz, plaintext 
#a {width: 20%} //to przykładowa wartość
#b{width: 80%} // tutaj deklarujesz resztę szerokości
[PHP] pobierz, plaintext 

jednak i tak lepiej wrzucić to do kontenera

[HTML] pobierz, plaintext 
<div id="all">
    <div id="a"></div>
    <div id="b"></div>
</div>
[HTML] pobierz, plaintext 

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

[PHP] pobierz, plaintext 
margin-left: -1%; // to musisz już sam pokombinować ile wystarczy
margin-right: -1%;//jw
[PHP] pobierz, plaintext 

[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.

[HTML] pobierz, plaintext 
<style type="text/css">
#container {width: 100%;}
#left {float: left; width:200px;}
#rigth {float: left; width: auto;} /* lub ustawić szerokość na 100% i lewy padding na 200px */
</style>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował vokiel 18.05.2010, 22:23:28

[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


edit: jakby to bylo takie proste to bym nie przychodzil z tym na forum..

Ten post edytował varez 18.05.2010, 22:40:24

[croc]

Ciekawe kiedy CSS pozwoli w końcu na jakieś obliczenia arytmetyczne.

Powód edycji: [thek]: gdyby w przyszłości offtopów nie robiłbyś bylibyśmy wdzięczni :)

[varez]

też mi się marzy 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)

Ten post edytował varez 18.05.2010, 22:48:43

[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%

[HTML] pobierz, plaintext 
<div id="all" style="width: 100%; background-color: #000; display: inline">
          <div id="left" style="width: 200px; float: left; background-color: #fff000">fdfd</div>
          <div id="right" style="width: auto; background-color: #eee444">fsf</div>
      </div>
[HTML] pobierz, plaintext 

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

To powinno działać (u mnie na ff 3.6.3 działa)

[HTML] pobierz, plaintext 
<style type="text/css">
div {height: 200px; margin: 0px; padding: 0px;}
#container {width: 100%;}
#left {float: left; width: 200px; background: red;}
#right {display: table-cell; margin-left: -200px; padding-left: 200px; background: green;}
</style>
<div id="container">
     <div id="left">Test 1</div>
     <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>
</div>
[HTML] pobierz, plaintext 

[croc]

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]

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 - 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

[HTML] pobierz, plaintext 
<style type="text/css">
html, body {margin: 0px; padding: 0px;}
div {height: 200px; margin: 0px; padding: 0px;}
#container {width: 100%;}
#left {float: left; width: 200px; background: red;;}
#right {margin-left: -200px; padding-left: 200px; background: green;}
</style>
<!--[if IE]>
<style type="text/css" media="all">
#right {margin-left: 0px; padding-left: 0px;}
</style> 
<![endif]-->
<body>
<div id="container">
     <div id="left">Test 1</div>
     <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>
</div>
</body>
[HTML] pobierz, plaintext 

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;)

[HTML] pobierz, plaintext 
<style type="text/css">
html, body {margin: 0px; padding: 0px;}
div {height: 200px; margin: 0px; padding: 0px;}
#container {width: 100%; position:relative;}
#left {float: left; width: 200px; background: red;}
#right {position: absolute; left: 200px; background: green;}
</style>
<body>
<div id="container">
     <div id="left">Test 1</div>
     <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>
</div></body>
[HTML] pobierz, plaintext 

Ten post edytował vokiel 20.05.2010, 06:57:32