Forum PHP.pl > Automatyczne dopasowanie contentRight

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Automatyczne dopasowanie contentRight

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

MaffSound

18.02.2014, 20:15:08

Witam, może odrazu wstawię kod a potem będe opisywał.

Kod

#content{
    margin: auto;
}

#contentLeft{
    width: 300px;
    float: left;
    margin-left: 50px;
    margin-top: 10px;
}

#contentRight{
    float: right;
    width: 850px;
    margin-right: 50px;
}

To tearz tak, width mam dopasowane do swojego ekranu, podejżewam że jak inni wejdą z inną rozzielczością to się zmieni i będzie brzydkie. Teraz chciałbym żeby automatycznie dopasowywało się contentRight do pozostaej strony. Nie mam wyznaczonych marginesów strony typu width:1000px; contntLeft musi mieć to 300px poniważ mi pasuję do loga i dzięki temu dobrze wygląda. Pomiędzy left a right mogło by być 10 px przerwy. Nie mam pojęcia jak to zrobić, próbowałem z procentami ale to i tak nie idzie. Strona ma się dopasowywać do każdego monitora, nie koniecznie na wersje mobilne. Mam nadzieje że wszystko opisałem. Pierwszy raz pisze na jakimś forum w sprawie css...

pehaperowiec

18.02.2014, 20:37:15

Kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }

        #content {
            background:blue;
            overflow:auto;
        }

        #left {
            width:300px;
            height:500px; /* Dla zobrazowania jak zachowuje się lewa strona gdy ma więcej treści*/
            background:#ccc;
            float:left;
        }

        #right {
            margin-left:310px;
            background:red;
        }
    </style>
</head>
<body>
    <div id="content">
        <div id="left">
            Left
        </div>
        <div id="right">
            Right
        </div>
    </div>
    <p>Dalsza część strony</p>
</body>
</html>

Takie to trudne?

BTW. Ctrl+ scroll myszy lub ctrl i +, albo ctrl i - powiększają lub pomniejszają strone, więc masz szanse zobaczyć jak kod zachowuje się pod innymi rozdzielczościami.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.