Witam,

Mam taką konstrukcję:

<div id="container">
<div id="leftColumn"></div>
<div id="optionalRightColumn"></div>
</div>

Załóżmy, że container ma 500px w przypadku gdy występuje w nim wyłącznie
lewa kolumna. Natomiast gdy pojawi się opcjonalna prawa kolumna, to
chciałbym aby element container miał 700px. Chciałbym uniknąć trzymania go
cały czas o szerokości 700px gdyż jest on centrowany na stronie i nawet
jeśli nie będzie prawej kolumny to strona będzie przesunięta o
(700-500)/2=100 pikseli w lewo. Czy jest możliwość ostylowania elementu
"container" tak aby w obecności optionalRightColumn był szerszy?

do góry

W dniu 2009-12-30 00:12, Marek pisze:
> Witam,
>
> Mam taką konstrukcję:
>
> <div id="container">
> <div id="leftColumn"></div>
> <div id="optionalRightColumn"></div>
> </div>
>
> Załóżmy, że container ma 500px w przypadku gdy występuje w nim wyłącznie
> lewa kolumna. Natomiast gdy pojawi się opcjonalna prawa kolumna, to
> chciałbym aby element container miał 700px. Chciałbym uniknąć trzymania
min-, max-, width


--
Krzysztof Warunek

http://tocheckserver.pl

do góry

> min-, max-, width

Próbowałem to już - niestety nie działa gdyż containter bez ustalonej na
stałe szerokości przestaje być centrowany.

do góry

On 2009-12-30 00:12, Marek wrote:
> Mam taką konstrukcję:
>
> <div id="container">
> <div id="leftColumn"></div>
> <div id="optionalRightColumn"></div>
> </div>
>
> Załóżmy, że container ma 500px w przypadku gdy występuje w nim wyłącznie
> lewa kolumna. Natomiast gdy pojawi się opcjonalna prawa kolumna, to
> chciałbym aby element container miał 700px. Chciałbym uniknąć trzymania
> go cały czas o szerokości 700px gdyż jest on centrowany na stronie i
> nawet jeśli nie będzie prawej kolumny to strona będzie przesunięta o
> (700-500)/2=100 pikseli w lewo. Czy jest możliwość ostylowania elementu
> "container" tak aby w obecności optionalRightColumn był szerszy?

#container {
display:table;
margin:0 auto;
}

#leftColumn {
width:500px;
float:left;
}

#optionalRightColumn {
width:200px;
float:right;
}

A dla badzIEwia starszego niż 8 jakieś expression czy łata w JS.

do góry

> #container {
> display:table;
> margin:0 auto;
> }
>
> #leftColumn {
> width:500px;
> float:left;
> }
>
> #optionalRightColumn {
> width:200px;
> float:right;
> }
>
> A dla badzIEwia starszego niż 8 jakieś expression czy łata w JS.

Pewnie tak zrobię... dzięki :-)
Czy orientujesz się jak radzą sobie inne przeglądarki z display:table ?

do góry

On 2009-12-30 15:15, Marek wrote:
> Czy orientujesz się jak radzą sobie inne przeglądarki z display:table ?

Przeglądarki sobie z tym radzą, ba nawet w IE8 działa.

do góry

> Przeglądarki sobie z tym radzą, ba nawet w IE8 działa.

Dobre kryterium: jeśli działa nawet w IE8 to w innych też musi :-))))
Jeszcze raz dzięki za podpowiedź. Redagując wątek zakładałem, że istnieje
możliwość "normalnego" rozwiązania problemu. No cóż, biorę się za JS.

do góry