[HTML][CSS] Divy w Divie Opcje

[orange_91]

hey.,
Trochę siędzę i się męczę z czymś dość prostym.
Mam div tresc, a w tym dive mam div x1 oraz div x2, w tych divach jest wyświetlany teskt - i tu uwaga wysokość jest zależna od ilości tekstu.
A teraz problem z div tresc - czemu div x1 i div x2 uciekają z div tresc Div tresc się kończy i to dość szybko .
wygląda to tak :




tak to mniej wiecej wyglądać powinno - na obrazku jest bez tereści. - zaznaczone są elemnty wyglądu za jakie są odpowiedzialne napisane divy,


i efekt na drugim obrazku został uzyskany za pomocą height dla div tresc, ale twarde ustawienie w px (wartość auto też nie pomaga) , nie rozwiązuje sprawy bo on musi być zależy od div x1 lub / oraz x2.

o to kawałki kodu:

Kod

#tresc {
    width:900px;
    background: url(pasex.png) repeat-y;
}

#x1 {
    margin: 0px 5px 0px 25px;
    padding:5px;
    width: 190px;
    float: left;
    border-style:solid;
    border-color:#fff #111 #111 #fff;
    border-width:1px;
    background-color:#fff;

}

#x2 {
    margin: 0px 25px 0px 5px;
    padding: 5px;
    width: 626px;
    float:right;
    border-style:solid;
    border-color:#fff #f70 #f70 #eee;
    border-width:1px;
    background-color:#fff;
    color:#110;

}

a tu jak to wygląda w html który jest php

Kod

<div id="tresc">
            <div id="x1">
            <?php include 'pak1.php'; ?>
            </div>
            
            <div id="x2">
            <h4>Ble ble</h4>
            <?php include 'pak1.php'; ?>
            </div>
        
        
        </div>
        
        <div id="stopka">
        
        </div>

[AdIoS_Neo]

dlatego że dla x1 i x2 masz zmieniony float... wtedy one "wyskakują" z ram nadrzędnego elementu. Powinno być tak:

[CSS] pobierz, plaintext 
#tresc {
    width:900px;
    background: url(pasex.png) repeat-y;
    float: left;
}
[CSS] pobierz, plaintext 

[orange_91]

Niestety to nie rozwiązuje sprawy.
Ale dzięki za dobry trop, bo te floady coś mącą. Gdy ich nie ma dla x1 oraz x2 to jest ok. ale wtedy znajdują się one pod sobą a nie obok siebie.
Tu na obazku jest x1 bez fload a x2 z float:right;. W jaki sposób ustawić te dwa divy obok omijając fload który powoduje wyskoczenie ich z ram ich głównego divu

[Fifi209]

float: left - w obu dajesz tak, ja bym dodał jeszcze display: block, jeżeli to nie podziała spróbuj zmniejszyć marginesy.

[cniak]

[HTML] pobierz, plaintext 
 
#tresc {
	width: 990px;
	overflow: auto; 	
}
#x1 {
	width: 600px;
	float: left;
	display: inline;
	position: relative;	
 
}
/** MENU **/
#x2 { 
 display: inline;
 width: 195px;
 float: right;
}
.clear {
        content: ".";
	display: block;
}
[HTML] pobierz, plaintext 

tresc html

[HTML] pobierz, plaintext 
    <div id="tresc">
<div id="x1">
lewa strona
 
<div class="clear"> </div>
 
 
    </div>
	<div id="x2">
prawa strona
      <div class="clear"> </div>
    </div>
	</div>
[HTML] pobierz, plaintext 

Ten post edytował cniak 2.11.2010, 10:11:30

[orange_91]

Próbowałem tego co napisaliście, i różnych kombinacji niestety nic nie przynosi dobrego efektu. Co do marginesów i wielkości to są ok.
float powoduje psucie, się ciałego wygląu position - ustawienia tego nic nie dają.
bez float nie daje się tego ustawić. mógłbym wykozystać drogę do okoła przez ustawienie margin ( to trochę oporne i nie zbyt profesjonalne ) od lewej strony dla x2 . w tedy wynik tego jest taki:


i ten x2 powinienien być na równo z x1 a nie pod nim.

Ten post edytował orange_91 2.11.2010, 14:33:31

[cniak]

mi działa, zapraszam tutaj, lub z wytłumaczeniem tutaj.
Masz może poprostu takie coś:
div tekst = 900 px
div lewy = 300 px
div prawy = 600 px
Niby wszystko pasuje, ale jeszcze musisz pamietac, ze marginesy, paddingi, obramowania to tez dodatkowe piksele ktore trzeba skalkulowac

Ten post edytował cniak 2.11.2010, 14:49:23