CSS min position left ?

  • Ich würde gerne wie auf dem Foto erkennbar, hier noch eine "Box" dazu machen. Allerdings ! wenn ich das Fenster kleiner mach, dann geht der Content logischer Weiße
    Über meine linke Box , gibt es dafür kein min-left-position: oder so ? :'D

    Mit freundlichen grüßen.

    http://s14.directupload.net/images/130525/wc9yl9u8.png


    Hier mal etwas code:

    <html>
    <head>
    <title>Meine Seite</title>

    <style>
    body
    {
    background-color: #888888;
    }

    #navi a
    {
    color: #000;
    text-decoration: none;
    }

    #navi a:hover
    {
    color: #f00;
    border-bottom: 2px solid #00bb00;
    }

    #inhalt a
    {
    color: #fff;
    text-decoration: none;
    }

    #inhalt a:hover
    {
    color: #000;
    border-bottom: 2px solid #0000FF;
    }

    #mainbox
    {
    border: 1px solid #000000;
    max-width: 800px;
    min-width: 800px;
    margin-left: auto;
    margin-right: auto;

    }
    #header
    {
    color: #FFFFFF;
    background-color: #000000;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    #header:hover
    {
    color: #000;
    background-color: #fff;
    }
    #box
    {
    position: absolute;
    width: 250px;
    min-width: 250px;
    top: 5px;
    left: 5px;
    }
    #navi
    {
    background-color: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    }
    #inhalt
    {
    background-color: #bbbbbb;
    border-bottom: 1px solid #000;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    }
    #inhalt img:hover
    {
    width: 130px;
    height: 90px;
    border: 2px solid #00FF00;
    }
    .Breite10
    {
    width: 10px;
    }
    #bildL
    {
    float: left;
    }
    #bildR
    {
    float: right;
    }
    #footer
    {
    color: #FF0000;
    background-color: #000000;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 5px;
    }
    #floatclear
    {
    clear: both;
    }

    </style>
    </head>
    <body>
    <div id="mainbox">
    <div id="header">
    HEADER
    </div>
    <div id="box">
    Samayo
    </div>
    <div id="navi">
    <a href="index.php">Startseite</a>
    </div>
    <div id="inhalt">
    <?php
    $var = "Willkommen auf der Startseite";
    for ($zaehler = 0; $zaehler < 5; $zaehler ++)
    {
    echo $var;
    }

    ?>


    <br />
    <?php $var .= "und nocheinmal"; ?>
    Toll das du da bist und weil es so schön war schreib ich es nocheinmal.
    <?php echo $var; ?>
    </div>
    <div id="footer">
    FOOTER
    </div>
    </div>
    </body>
    </html>

  • Du kannst ein margin-left für den Content (also #mainbox) definieren, der dann nicht überschritten wird.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!