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.

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

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



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



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.

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.

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 

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.