Forum PHP.pl

powiedzmy ze mam dwa divy na formie obok siebie:

[HTML] pobierz, plaintext 
<div class="div_1"></div>
<div class="div_2"></div>
[HTML] pobierz, plaintext 

a style ich sa nastepujace:

[HTML] pobierz, plaintext 
.div_1 {
    margin:0px;
    max-width:690px;
    min-width:500px;
    float:left;
    background-color:#fff000;
 
}
 
.div_2 {
    margin:0px 0px 0px 15px;
    float:right;
    width:493px;
    height:100px;
    background-color:#ff0000;
}
[HTML] pobierz, plaintext 

problem polega na tym, ze jak zmieniam wielkosc okna to pierwszy div zamiast zmieniac swoja szerokosc to pozostaje bez zmian, natomiast drugi div owszem trzyma sie prawej strony, ale wskakuje pod diva pierwszega i rusza sie pod nim... dlaczego ? co mam zle, ze ten pierwszy div nie chce zmieniac swojej pierwotnej szerokosci, a drugi by zostawał na swoim miejscu ?

hmm a nie kazałeś mu zawsze mieć daną szerokość

tak ten po prawej czyli div_2 ma miec stala szerokosc, a pierwszy div czyli div_1 ma sie zmieniac...

IMHO floatem tego nie zrobisz.

Ja bym proponował coś takiego:

[HTML] pobierz, plaintext 
<div id="parent"><div id="content"></div><div id="col"></div></div>
[HTML] pobierz, plaintext 

cos nie za bardzo chce dzialac... po dodaniu "position absolute" prawy div przelecial na lewa strone i za nic nie chce sie stamtąd ruszyc...

Pozycja dla parent też jest ważna. [;

rowniez byla ustawiona, a mimo to div_2 jest przy lewym marginesie, a div_1 nadal nie zmienia szerokosci... czemu tak sie dzieje ?

Pokaż, co ustawiłeś.

calosc wyglada w ten sposob:

[HTML] pobierz, plaintext 
<div style="margin:0px 10px 0px 10px;">
 
            <div style="float:left;margin:0px;height:1000px;background-color:#f0ff00;">
 
                <div class="margin:0px 0px 0px 0px;float:left;max-width:690px;min-width:500px;background-color:#fff000;">
 
                    kashdkajhaksdjh dskjhsd kjlash askdjhaskjashasdk jlash askjl sh fakjsl ha fkjlash asdjk hasdkjh asdkjadhaksjd hadskj hkjasdhadkj hdkj ahdskl ajdsh adksj hasdkj hadsj khf jkadsh adskjhkjsdh akdsjhadsk jasdhasdkj hsd kjdsh dsk jhdskj sdh asdkjl hdaskj adsh adkjfha kjasdhfdskjh asdkj hasdkj adhskj hjkds hdskj hdskjlhsdksjadh dskj hdasjk h
 
                </div>
 
            </div>
 
            <div style="float:right;margin:0px;height:1000px;background-color:#00fff0;">
 
                <div style="margin:0px 0px 0px 0px;float:left;width:493px;height:100px;background-color:#ff0000;">
 
 
                </div>
 
            </div>
 
        </div>
[HTML] pobierz, plaintext 

ale ciagle nie hula...

class w 3cim divie?
prosciej bedzie tak:

[HTML] pobierz, plaintext 
<div id="div2" style="padding-left: 492px; overflow: hidden;">
   <div id="div1" style="float: left; margin-left: -492px; _margin-left: -246px;">lewy div ze stala szerokoscia</div>
   to co po prawej ze zmienna szerokoscia
</div>
[HTML] pobierz, plaintext 

Prosty, działający przykład:



Inspiracje w takich sytuacjach polecam czerpać np. stąd: http://www.smashingmagazine.com/2007/01/12...-and-templates/ trochę własnego wysiłku i masz to o co ci chodziło..

@nitek: moze i prosty ale dziala tylko w okreslonych sytuacjach

Ok, ale dlaczego? IE + FF dobrze dają sobie radę, Chrome i Safari też nie powinny mieć problemu (akurat nie mam pod ręką).
Jeśli gdzieś to nie działa, chętnie poszerzę swoją wiedzę ;]

obiekty z position absolute nie rozpychaja sie wiec ciezko cos obok nich umiescic (choc to zalezy od sytuacji)
nie okresliles position dla obiektu nadrzednego dla tego z position absolute - dopuki jest nim body mozna tego niezaowazyc ale w pozostalych przypadkach polozenie obiektu moze byc inne niz oczekiwane
ps. zakladam ze w doctype jest xhtml;)

dzieki, ale te odpowiedzi nie bardzo sa mi w stanie pomoc. Probowalem to podpiac do mojego projektu, ale niestety nie bardzo sie da. Na stronie musze miec taki uklad div'ow i musze sobie z tym poradzic. Dla pomocy zamieszczam obraz, ktory przedstawia problem:



dlatego podalem taki kod wczesniej, a ten class to byl blad przy kopiowaniu. Jak teraz widac musze zrobic, aby to wlasnie lewa kolumna byla z automatyczna szerokosscia. Dla przypomnienia moj kod z przykladowymi kolumnami i po jedyn divie w srodku wyglada tak:

[HTML] pobierz, plaintext 
<div style="margin:0px 10px 0px 10px;">
 
            <div style="float:left;margin:0px;height:1000px;background-color:#f0ff00;">
 
                <div style="margin:0px 0px 0px 0px;float:left;max-width:690px;min-width:500px;background-color:#fff000;">
 
 kashdkajhaksdjh dskjhsd kjlash askdjhaskjashasdk jlash askjl sh fakjsl ha fkjlash asdjk hasdkjh asdkjadhaksjd hadskj hkjasdhadkj hdkj ahdskl ajdsh adksj hasdkj hadsj khf jkadsh adskjhkjsdh akdsjhadsk jasdhasdkj hsd kjdsh dsk jhdskj sdh asdkjl hdaskj adsh adkjfha kjasdhfdskjh asdkj hasdkj adhskj hjkds hdskj hdskjlhsdksjadh dskj hdasjk h
 
                </div>
 
            </div>
 
            <div style="float:right;margin:0px;height:1000px;background-color:#00fff0;">
 
                <div style="margin:0px 0px 0px 0px;float:left;width:493px;height:100px;background-color:#ff0000;">
 
 
                </div>
 
            </div>
 
        </div>
[HTML] pobierz, plaintext 

Efekt jaki chcialbym uzyskac widac na stronie wykop.pl, tam dokladnie lewa czesc div'ow sie zmienia a prawa jest bez zmian.

pozdrawiam i dzieki za pomoc

moze mi ktos pomoc ?

Ten post edytował kkuubbaa88 30.06.2009, 09:00:32

http://www.456bereastreet.com/archive/2005..._width_elastic/
http://www.nowcss.com/layouts/css-fluid-layout-tutorial
o to Ci chodzi?

Ten post edytował webber 30.06.2009, 11:00:54