[css] 2 kolumny, jedna stałej, jedna zmiennej szerokości

0

Mam dość dziwny problem: muszę zrobić tak aby udało się jakimś magicznym trafem aby jedna kolumna miała dokładnie 200px a druga zajmowała całą resztę obszaru. póki co wzorowałem się na http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ i bardzo ładnie wszystko wyglądało.

Teraz się okazały 3 problemy:

  1. Lewa kolumna w kodzie musi być przed content i tyle. Nie ma zmiłuj
  2. na lewą i content jest dokładnie po jednym znaczniku. nie ma mowy o wrapperach itp.
  3. musi się dać zaznaczyć tekst w lewej.

Oczywiście próby wszelkie mi poszły gdzieś, najlepiej co mi się udało zrobić to to że itemy w środku odsuwało, ale to jest lipa, bo nie spełnia założeń pkt3...

Póki co na szczęście nie musze się martwić o IE, bo to tylko do użytku wewnętrznego, ale i tak musi być...

Proszę, pomocy, bo mnie już mózg wysiada jak to zrobić.

0

Pokaż co zrobiłeś.

0

Aye, daj to, co masz. Rozumiem, że można skorzystać z elementy zawierającego te dwie kolumny? Tj. #sidebar i #content mogą być (razem) otoczone (jednym) #containerem? (może to być już istniejący element, byleby zawierał te dwie kolumny)

Jeśli tak i jeśli to nawet nie musi działać w IE, to nie powinno być z tym najmniejszego problemu.

edit: BTW., umieszczenie #content przed #sidebar to dobra praktyka. Rozumiem, że nie chcesz jej stosować, bo masz ograniczone możliwości ingerencji w (być może nie najlepszy) HTML.

0

ingerencji nie mam bo generowany.

ogólnie prosta struktura:

<dl>
  <dt>(<label>txt</label>|<span>txt</span>)</dt>
  <dd>(<input />|<ul>itemy</ul>|<p>txt</p>)</dd>
</dl>

(znaczy się jest w dt albo label albo span a w dd albo input, albo ul, albo p, ale mogą być inne rzeczy...)

tak to wygląda w kodzie, nawet nie mam wpływu na białe znaki, bo po prostu muszą być, przez co bardzo lipnie wygląda inline-block.

dotychczas css wyglądał tak:

dl {
	padding: 0;
	margin: 0;
	clear: both;
}
dt, dd {
	min-height: 25px;
	line-height: 25px;
	float: left;
	margin: 0;
	padding: 0;
}

dt {
	width: 100px;
	clear: left;
}
dd {
	min-width: 160px;
}
dd input[type="text"], dd input[type="password"] {
	width: 150px;/*defensywna szerokość*/
	padding: 1px;
}

dd input[type="submit"] {
	width: 70px;
	padding: 0;
}

próbowałem kombinować z tym layoutem co w pierwszym postcie, ale powoduje to że dt znika kompletnie, albo dd zasłania całą zawartość dt, albo wszystko się rozsypuje.

1 użytkowników online, w tym zalogowanych: 0, gości: 1