Jak zrobić dwa bloki "div" obok siebie?

CSS:

#tresc{
    background-color: orange;
    padding-bottom:200px; /*wysokosc stopki*/
    float:left;
}
#lewy_pasek{
    background-color: blue;
    width: 200px;
    float:left;
    height: 90px;
}
#obramowanie{
    background: rgba(1, 255, 1, 0.15);
    border: 3px solid #1C1C1C;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

index.php:

<div id="obramowanie">
<div id="lewy_pasek">
aaa
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="tresc">
<?PHP
if(isset($_GET["menu"]))
{
    if($_GET["menu"]==1)
{
    include ("omnie.php");
}
else if($_GET["menu"]==2)
{
    include ("omnie2.php");
}
else if($_GET["menu"]==3)
{
    include ("omnie3.php");
}
else if($_GET["menu"]==4)
{
    include ("omnie4.php");
}
else if($_GET["menu"]==5)
{
    include ("news.php");
}
else if($_GET["menu"]==6)
{
    include ("link6.php");
}
else
{
    echo "blad autoryzacji";
}
}

?>
</div>
</div>

Próbowałem już na wiele sposobów
float:left
clear tez nie dziala
Chodzi mi mniej więcej o taki rozkład jak na obrazku:

Przy czym tam gdzie jest #Strona u mnie jest #obramowanie oraz menu i treść będą do siebie przylegać.

hmm nie jestem specem ale menu na float:left a treść na float:right?

edit:
W sumie to nie ma znaczenia chyba. No mistrzem nie jestem w tych sprawach :) zawsze metoda prób i błędów.

Jak tak zrobiłem lewy_pasek i text wystają poza obramowanie i text jest pod lewy_pasek

a #tresc nie ma miec wymiaru? to jakiś dynamiczny boks?

Tak. Ma się rozciągać jak będzie więcej treści.

Za divem #tresc wstaw jeszcze jednego div-a ze stylem: clear: both

W obramowaniu mają być 2 bloki a nie 3. Jak w lewy_pasek i tresc ustawiam float:left to są dobrze obok siebie tylko że wtedy obramowanie się psuje wygląda to tak jakby bloki wystawały z obramowania.

dodajesz do obramowania 'overflow:hidden', no i prawy div musi być 'float:right' a nie left.

#obramowanie{
    background: rgba(1, 255, 1, 0.15);
    border: 3px solid #1C1C1C;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    
    /* overflow:hidden */
    overflow: hidden;
}


#lewy_pasek{
    background-color: blue;
    width: 200px;
    float:left;
    height: 90px;
}

#tresc{
    background-color: orange;
    padding-bottom:200px; /*wysokosc stopki*/
    
    /*right!*/
    float:right; 
}

@997: Prawie dobrze, ale sypie się jak jest treść ;]
http://jsbin.com/noya/1/

Jeżeli lewa kolumna ma sobie być, a prawa ma się floatować i rozciągać (z definicji standardów floaty MUSZĄ mieć podaną szerokość) to tutaj tylko tabelka (można oczywiście nie stosować tagu table a bawić się w divy i display: table-*), ew. jeżeli wysokość tego po lewej jest zawsze określonego wymiaru na wysokość to nawet absolutami by coś zadziałał

W obramowaniu mają być 2 bloki a nie 3

Kto mówi o dodawaniu trzeciego bloku? Wstawiasz takiego div-a:

<div style="clear:both; width: 0px; height: 0px;"></div>

Nie będzie wyświetlany, a floaty, trzeba wyczyścić bo właśnie ramka Ci się nie dopasuje i wszystko co będzie dalej także zostanie podniesione.

dodanie znacznika <code class="html"> - fp

Zapodam jednym z moich ulubionych linków: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
Ty chyba opisujesz ten przykład: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/2-column-css-layouts/fw-28-2-col/

tak jakby bloki wystawały z obramowania

To brzmi, jakbyś miał źle ustawione paddingi - pamiętaj, że szerokość bloku to width + padding-left + padding-right. (Chyba że zastosujesz http://css-tricks.com/box-sizing/).

aurel napisał(a):

Zapodam jednym z moich ulubionych linków: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
Ty chyba opisujesz ten przykład: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/2-column-css-layouts/fw-28-2-col/

totalnie bezużyteczne, wszystkie kontenery mają ustawione wysokości i szerokości - w takim przypadku to nie jest nic trudnego, narysować dwa prostokąty o określonych wymiarach to nie problem

jeśli jedna kolumna ma się dostosowywać do drugiej to musi mieć display: table-cell albo być w prawdziwej tabelce, albo trzeba wykorzystać wyrażenie css: expression (ale to będzie działać tylko w nowych przeglądarkach), albo użyć javascript
zazwyczaj jednak "automatycznie dopasowująca" się kolumna wcale się nie dostosowuje tylko prześwituje przez nią tło kontenera nadrzędnego sprawiając takie wrażenie