Elementy div'a w nowej linii

Googlowałem, ale zdecydowana większość wyników tyczy się nowej linii pomiędzy divami (nie wiem - może źle wpisuje słowa kluczowe).

Tak więc:
mam jednego dużego div'a - settings
a w nim 4 małe (obok siebie każdy).

Mniej więcej coś takiego

| div_settings |
| div mały | div duży | div mały | div duży |
l label_1 | combo_1 | label_2 | combo_2 |
|---------------------------------------------|

no i w CSS robie tak:

#settings { height: 300px; width: 700px; }
.sett_left { width: 15%; float: left; clear: both; }
.sett_right { width: 35%; float: left; clear: both; }

<div id="settings">
			<div class="sett_left">
					<label for="...">....</label>
			</div>
			<div class="sett_right">
			
				<select name="...">
					<option value="...">...</option>
				</select>

			</div>
			<div class="sett_left">
				<label for="...">....</label>

			</div>
			<div class="sett_right">
				<select name="..">
					<option value="...">...</option>
				</select>
			</div>	
		</div>

Dałem w CSS clear: both do sett_left i sett_right; ale to sprawiło że divy są pod sobą a nie jego elementy.
co zle robie ?

wywal clear:both z cssów dla sett_left i sett_right, ZA ostatnim divem (tym z klasą sett_right) daj <br style="clear: both;" />

pomylily mi się tagi :>
Dziwne ze przez CSS sie nie da tego osiagnac - przeciez po to to jest, azeby w HTMlach nie mieszac. No ale sprobuje

mimo wszystko układ strony zależy też od html. z pustego html nie zrobisz szablonu ;)

możesz zrobić bodajże overflow: hidden (czy tam ktoraś inna wartość - jak nie działa to sprawdź wszystkie) do #settings i wywalić wszystkie cleary - wtedy nie musiałbyś dotykać kodu html. z tym, że ja wolę floaty czyścić clearem.