[html, css] Ustawienia divów.

[Paweł B.]

Witam, męczę się z tym i męczę...
I nic mi nie wychodzi...

Mam taki problem - chciałbym aby moja strona wyglądała tak:


wszystko ok, kod zrobiłem w ten sposób:

Kod: Zaznacz cały

#left { 
    float:left; 
    width:208px; 
    height: auto;
    background: url(images/l1.png) no-repeat;
        padding-left: 5px; 
        padding-right: 5px;
        padding-top: 20px;
}

#right { 
    width:620px;     
    height: auto;
    float:right; 
    font-size: 12px;
    padding:0px 30px 10px 0px; 
} 

Kod w htm wygląda następująco:

Kod: Zaznacz cały

<div id="main">
<div id="left">
</div>
<img src="images/hr.gif" height="643">
<div id="right">
</div>
</div>

hr.gif - to to czarna linia (pionowa) na obrazku (1px)

Wszystko działa, ale gdy napisze więcej tekstu w prawym divie wszytko się rozjeżdża:



niby mam atrybuty ustawione na height: auto; ale niestety nie działa...

Chciałbym, aby wyglądało to tak:




DRUGA SPRAWA:
W przeglądarkach typu firefox, chrom, opera działa tak jak na obrazku [ LINK ], ale po włączeniu strony na szkolnym komputerze (Internet Explorer) układ strony wygląda tak:

Tekst zaczyna się dopiero po obrazku hr.gif ;/



Może troszeczkę namieszałem, ale liczę bardzo na Waszą pomoc.
Z góry dziękuję.

Pozdrawiam,
Paweł B.

[knight-rider]

obu tym divom daj atrybut overflow:hidden; wtedy text bedzie na swoim miejscu i same beda sie dostosowywac do ilosci tresci.

Ale za pomoca css i html nie uzyskasz efektu aby te 2 divy byly sobie rowne wysokoscia (o ile chesz zachwowac kolorystyke przedstawiona na obrazku).
Aby to uzyskac musisz posluzyc sie JS.

Jesli nie samo overflow:hidden; rozwiaze problem

[Paweł B.]

http://ryszardbrzycki.pl/rb/ - zobacz jak to wygląda.

Obrazek hr.gif, który jest koło tego border-left chciałbym mieć jako ten border a nie czarna linie...
i ta stopka... się rozwala

Nie mam pojęcia jak to zrobić...

[Lobo]

najprościej by chyba było dać border na prawy bok lewego diva. Btv ważna sprawa to czyszczenie floatów po ostatnim elemencie w grupie który tego używa.

Co do twojego problemu zapomniałeś dodać, że wcześniej miałeś ustaloną wysokość dla obu divów, no to nic dziwnego, że ci tekst wyłaził. Poco podajesz wysokość jak div ma ci się rozciągać? To height: auto usuń, i żadnego overflow nie dodawaj. Div się rozciąga żeby pomieścić treść domyślnie(jak nie ma podanych rozmiarów).

A jak chcesz mieć coś więcej niż kreskę, czyli w jednej kolumnie więcej zawartości, a rozciągają się obie i mają równą wysokość, to knight-rider nie ma racji. Rozwiązaniem jest faux columns.