Dwa elementy obok siebie. Opcje

[webdice]

Witam,

mam DIV'a o stałej szerokości (załóżmy 500px), w nim kolejne dwa z tym że o szerokości ustalanej w procentach. Do tego momentu wszystko jest w porządku, problem zaczyna się jak dodam obramowanie dla wewnętrznych elementów (układają się jeden pod drugim). Czy jest na to jakieś rozwiązanie.

[korek_a]

tak jest ale bez kodu to tak krucho


ale zapewne nie maje miejsca i dlatego się zsuwają w dół , i czy te wartości procentowe tam muszę być ? bo warto nie mieszać % z px
ale spróbuj zmniejszyć % o wartość grubości ramki

Powód edycji: Błąd ortograficzny. /webdice

[webdice]

(...) ale zapewne nie maje miejsca i dlatego się zsuwają w dół (...)

To jest oczywiste, chodzi o 4px (grubość obramowania).

(...) i czy te wartości procentowe tam muszę być? (...)

Szerokość elementu nadrzędnego będzie ustalana przez użytkownika. Poza tym jakby szerokość była ustalana w pikselach, nie było by problemu.

spróbuj zmniejszyć % o wartość grubości ramki

Twoim zdaniem jeden lub dwa piksele to ile procent?

Problem rozwiązałem korzystając z marginesów ujemnych, sprawa zasadniczo dość prosta, ale mnie nie satysfakcjonuje. Jeśli ktoś zna bardziej eleganckie rozwiązanie to chętnie wysłucham.

[pawkow]

Warto wiedzieć, że procenty można podawać nie tylko jako liczby całkowite, ale także jako liczby rzeczywiste, np. width: 69.66%

[webdice]

Warto wiedzieć, że procenty można podawać nie tylko jako liczby całkowite, ale także jako liczby rzeczywiste, np. width: 69.66%

Jakby nie było, przy zmiennej szerokości nie da się określić ile procentów ma jeden piksel.

[sowiq]

Masz kilka możliwości, ale z nich wszystkich Twoje rozwiązanie wydaje się być najbardziej eleganckie:
- ujemne marginesy + padding-left: 4px dla rodzica
- JS
- CSS expressions
- outline zamiast border, ale tego nie obsługuje IE
- 2-komórkowa tabelka


BTW, jakoś tak jest, że za pomocą tabelek wiele robiłoby się najprościej, chociażby centrowanie pionowe...

[edit]

[HTML] pobierz, plaintext 
<div style="width: 500px; height: 150px; border: 1px solid #00f;">
		   <div style="float: left; height: 100px; width: 30%;">
			<div style="height: 100px; background: #ff0; border: 1px solid #000;"></div>
		</div>
		<div style="float: left; height: 100px; width: 70%;">
					<div style="height: 100px; background: #f00; border: 1px solid #000;"></div>
		</div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował sowiq 24.04.2009, 12:08:02

[webdice]

Tabele odpadają, wiadomo dlaczego. Expressions to w sumie JavaScript, więc lepiej było by napisać wszystko w czystym JS (zwłaszcza że moja aplikacja będzie opierać się głównie o ten język). Outline również odpada z podanego przez Ciebie powodu. Rozwiązanie z ujemnymi marginesami było by całkiem w porządku gdyby nie fakt że na przykład przy zmianie grubości obramowania (nie wspomnę już o paddingach) trzeba zmieniać wartości marginesów. Twoje rozwiązanie mnie jak najbardziej satysfakcjonuje.