[HTML][CSS]Float - budowa layout'a Opcje

[Mody23]

Witam.

Mam problem z odpowiednim ułożeniem elementów float w moim kodzie.

Ogólnie teraz wygląda to wszystko tak:



Jak widać, ten div po lewej stronie jest rozciągnięty (numer 1) do wielkości tego po prawej stronie. Następny div (numer 2) jest już normalnych rozmiarów. Chcę aby div 1 miał taką samą wysokość jak div 2, jednak nie potrafię tego zrobić w kodzie.

Oto mój kod:

[HTML] pobierz, plaintext 
		<div id="RightBox"><div class="Title">Informacje</div><br>Tutaj jest dużo tekstu na wysokość tego diva</div>
		<div id="movie">
			<a style="font-size: 130%; text-decoration: none; font-weight: bold; color: #33A1DE;" href="#">Wada ukryta / Inherent Vice (2014)</a><br><br>
			<div style="height: 200px;">
				<div style="width: 70%; height: 200px; float: right; margin-top: 6%;">
					W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... <b>[ Czytaj więcej ] ť</b>
				</div>
				<div style="border: 1px solid #33A1DE; border-radius: 5px; padding: 1px; background: #33A1DE; height: 200px; width: 150px;">
					<img src="image.jpg">
				</div>
			</div>
			<div style="clear: both;"></div>
			<div style="background: grey; border: 1px solid #000; padding: 1px; margin: 3px;">hehe</div>
		</div>
		<div id="movie">
			<a style="font-size: 130%; text-decoration: none; font-weight: bold; color: #33A1DE;" href="#">Wada ukryta / Inherent Vice (2014)</a><br><br>
			<div style="height: 200px;">
				<div style="width: 70%; height: 200px; float: right; margin-top: 6%;">
					W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... <b>[ Czytaj więcej ] ť</b>
				</div>
				<div style="border: 1px solid #33A1DE; border-radius: 5px; padding: 1px; background: #33A1DE; height: 200px; width: 150px;">
					<img src="image.jpg">
				</div>
			</div>
			<div style="clear: both;"></div>
			<div style="background: grey; border: 1px solid #000; padding: 1px; margin: 3px;">hehe</div>
		</div>
		<div style="clear: both;"></div>
[HTML] pobierz, plaintext 

I tutaj klasy:

Kod

#RightBox {
font-size: 14px;
font-family: 'Century Gothic';
margin-top: 1%;
padding: 2%;
border: 1px solid #D1EAF8;
width: 30%;
background: #FCFDFE;
float: right;
}

#movie {
padding: 1%;
font-size: 14px;
font-family: 'Century Gothic';
width: 60%;
border: 1px solid grey;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
}

Może mnie ktoś nakierować jak to zrobić, aby było tak jak chcę?
Dzięki.

Ten post edytował Mody23 2.04.2015, 10:55:38

[Turson]

Jeżeli już znalazłeś rozwiązanie to się podziel nim na forum

[Mody23]

Jednak nie znalazłem rozwiązania. Problem cały czas występuje ;/ Potrafię go jedynie zamaskować, używając na sztywno "height: 200px;" dla głównego diva. Wtedy ta przerwa nie jest widoczna.
Ma ktoś jakiś pomysł?

[viking]

Jeśli dobrze rozumiem problem to w samym CSS będzie cieżko. Najszybciej będzie w JS sprawdzić wysokość wszystkich divów, wybrać największą wartość i zaaplikować do pozostałych.

[untorched]

Coś takiego? http://jsfiddle.net/bzkLz4ux/

[kafowi]

Jeżeli chcesz mieć wysokość div1 taki jak div2 możesz skorzystać z:
- https://developer.mozilla.org/en-US/docs/Web/CSS/element

Aczkolwiek musisz bardziej szczegółowo opisać swój problem bo trudno dojść do tego, co konkretnie chcesz osiągnąć (bynajmniej mi)

[com]

@up własnie nie chce a tak ma teraz poza tym spójrz na Browser compatibility

@up spójrz na obrazek, bo źle zrozumiałeś. Nie odpisze Ci na pw bo limit 15 na dzień wykorzystałem

[fate]

Wywalić to z 12L
<div style="clear: both;"></div>
Wszedzie powywalac to świństwo