Próbuję zrobić na divach prosty, jak się wydaje, układ składający
się z obrazka i położonej na prawo od niego kolumny tekstu.

HTML wygląda tak:

<div class="zewnetrzny">
<div class="obrazkowy">
<img src="obrazek.jpg" />
</div>
<div class="tekstowy">
<p>Tutaj kolumna tekstu.</p>
</div>
</div>

Przy czym stała jest jedynie szerokość diva zewnętrznego (800px).
Szerokości divów wewnętrznych mają być zmienne w zależności od
(nieznanej z góry, lecz nie większej niż 600px) szerokości obrazka,
który znajdzie się w jednym z nich. Innymi słowy: jeśli obrazek
będzie miał 500px szerokości, to tekst ma mieć 300px.

float: left dla obu wewnętrznych daje pożądany rezultat jedynie w
prastarym IE6, które mam tu pod ręką. Innych pomysłów nie mam. Da
się?

do góry

Dnia Tue, 11 May 2010 14:43:50 +0200, G.Suss napisał(a):

> HTML wygląda tak:
>
> <div class="zewnetrzny">
> <div class="obrazkowy">
> <img src="obrazek.jpg" />
> </div>
> <div class="tekstowy">
> <p>Tutaj kolumna tekstu.</p>
> </div>
> </div>
>
> Przy czym stała jest jedynie szerokość diva zewnętrznego (800px).
> Szerokości divów wewnętrznych mają być zmienne w zależności od
> (nieznanej z góry, lecz nie większej niż 600px) szerokości obrazka,
> który znajdzie się w jednym z nich. Innymi słowy: jeśli obrazek
> będzie miał 500px szerokości, to tekst ma mieć 300px.


.zewnetrzny {
width: 800px;
background: green;
overflow: auto;
}

.obrazkowy {
display: inline;
float: left;
max-width: 600px;
overflow: hidden;
}

.tekstowy {
background: red;
}

--
Tomek
http://www.advstar.com/

do góry

Tomasz Sowa wrote:

> .zewnetrzny {
> width: 800px;
> background: green;
> overflow: auto;
> }
>
> .obrazkowy {
> display: inline;
> float: left;
> max-width: 600px;
> overflow: hidden;
> }
>
> .tekstowy {
> background: red;
> }

Też nie jest to to, o co mi chodzi, bo w przypadku gdy tekstu jest
więcej, "zawija się" pod obrazek. Chcę, żeby oba divy zachowywały
się jak komórki tabeli.

do góry

Dnia Tue, 11 May 2010 20:05:24 +0200, G.Suss napisał(a):

>> .tekstowy {
>> background: red;
>> }
>
> Też nie jest to to, o co mi chodzi, bo w przypadku gdy tekstu jest
> więcej, "zawija się" pod obrazek. Chcę, żeby oba divy zachowywały
> się jak komórki tabeli.

dla .tekstowy mozesz dodac float: left wtedy tekst nie będzie się zawijał,
lub jeśli mają to być 'jak komórki tabeli' to tak:

.zewnetrzny {
display: table;
width: 800px;
background: green;
}

.obrazkowy {
display: table-cell;
max-width: 600px;
overflow: hidden;
}

.tekstowy {
display: table-cell;
background: red;
vertical-align: top;
}

oczywiście to od IE8 dopiero

--
Tomek

do góry