Jak zrobić dwa bloki "div" obok siebie?

0

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:
user image
Przy czym tam gdzie jest #Strona u mnie jest #obramowanie oraz menu i treść będą do siebie przylegać.

0

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.

0

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

0

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

0

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

0

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

0

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.

0

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; 
}
1

@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ł

0

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0