[HTML][CSS]Ułożenie div'ów, Blok B z prawej strony bloku A. Blok C pod nimi.I tak w nieśkończoność Opcje

[b_chmura]

Witam
hmm wygląda na to, że czas dał siwe znaki... Nie potrafię sobie poradzić z umiejscowieniem div'ów.
Efekt jak chce osiągnąć w przybliżeniu wygląda następująco:

Kod

+---+---+
| a | b |
+---+---+
| c |
+---+

+---+---+
| a | b |
+---+---+
| c |
+---+

+---+---+
| a | b |
+---+---+
| c |
+---+

(...)

+---+---+
| a | b |
+---+---+
| c |
+---+

Blok B ma przylegać do prawego bloku A zaś blok C ma znajdować się pod nimi. Taki system bloków ma mieć możliwość powtarzania się nieskończenie.

Poniższy kod działa jedynie pod internet explorerem:

Kod

<style>
div { width: 100px; height: 100px; border: #c0c0c0 1px solid;}
div.a { float: left; }
div.c { clear: both; }
</style>

<div id="1" class="a">a</div>
<div id="2" class="b" >b</div>
<div id="3" class="c">c</div>
<br />
<div id="1" class="a">a</div>
<div id="2" class="b" >b</div>
<div id="3" class="c">c</div>
<br />
<div id="1" class="a">a</div>
<div id="2" class="b" >b</div>
<div id="3" class="c">c</div>

Jeśli ktoś na szybko potrafi rozwiązać problem, prosiłbym o odpowiedz. Z góry dziękuje ślicznie.

Ten post edytował b_chmura 15.10.2008, 13:33:06

[baranek77]

moze sprobuj dac jakis div obeljmujacy z szerokoscia podana na sztywno a divom dac float:left

[MajareQ]

ja bym zrobił to mniej więcej tak:

(ofc na classach jesli ma się powtarzać)

[HTML] pobierz, plaintext 
<div class="box">
   <div class="a"></div>
   <div class="b"></div>
</div>
<div class="c"></div>
[HTML] pobierz, plaintext 

css:

Kod

.box {
height: auto;
width: auto;
min-height: 100px;
min-width: 100px;
}
.a {
height: auto;
width: 100px;
float: left;
}
.b {
height: auto;
width: 100px;
float: left;
padding-left: 100px;
}
.a {
height: auto;
width: auto;
}

[korek_a]

elementy float ustawiają sie obok siebie i muszą być zdeklarowane w css

Kod

<style>
div { width: 100px; height: 100px; border: #c0c0c0 1px solid;}
div.a { float: left; }
div.b { float: left; }
div.c { clear: both; }

</style>

[b_chmura]

~korek_a - strzał w dziesiątkę ;-) dzięki.

[MajareQ]

Ja mam jeszcze wątpliwość czy będzie to działało należycie dobrze pod różnymi przeglądarkami.

[b_chmura]

W takim razie jakby ktoś mógł sprawdzić to pod IE 6 i Operami. Pod Mozilla Firefox & Internet Explorer 7 nie ma problem.

EDIT:
Podaje link do pliku coby wszystko przebiegło szybciej: link

Ten post edytował b_chmura 15.10.2008, 10:56:06

[MajareQ]

Od godziny 15-tej będę na uczelni, gdzie mam i FF 2 i IE 6. Sprawdzę IE jak nie będzie już za późno.

[piaseq]

W takim razie jakby ktoś mógł sprawdzić to pod IE 6 i Operami.

Pod IE6, Operą 9.5 i Safari 3.1.2 wygląda ok

Ten post edytował piaseq 15.10.2008, 11:06:35

[-Gość-]

w FF3 OK

[korek_a]

to jest podstawa ze elementy float ustawiają się obok siebie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) dział a dobrze bo mi jeszcze nigdy sie nie zepsuło (IMG:http://forum.php.pl/style_emoticons/default/party.gif)

[MajareQ]

To akurat jest podstawą. Ale już kilka razy zetknąłem się z problemami gdy float i both działają razem.

ale jak działczy to nvm.

[hiszpanespaniol]

div.a musi mieć jeszcze clear: left



inaczej to się rozjedzie przy szerszych layoutach

edit: przeporaszam. nie wziąłem pod uwagę div.c który ma clear: both

Ten post edytował hiszpanespaniol 15.10.2008, 11:49:51

[webdice]

Same tagi nie są tytułem, proszę poprawić. Takie rzeczy już powinieneś wiedzieć.

[b_chmura]

Same tagi nie są tytułem, proszę poprawić. Takie rzeczy już powinieneś wiedzieć.

Zapomniało mi się ;-)