• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 Boxen nebeneinander ausrichten

S

scorpio

Neues Mitglied
Hallo,

ich habe ein Problem bei der Ausrichtung von 3 Box-Elementen. So sieht der Code aus:

Code: 
<html>
    <head>
        <title>My Site</title>
        <style type="text/css">
        body{
            font-family : Verdana, Arial, Helvetica, sans-serif;
            padding: 0px;
            margin: 0px;
            background-color: #FAEBD7;
        }

        h1{
            text-align:center; 
            font-size:20px;
            color:#000000;
            margin-bottom:0px;
        }

        #header 
        {
            position:relative;
            height: 110px;
            margin: 10px;
            min-width:1150px;
            border-style:dotted;
        }

        #middle {
            position: relative;
            width: 100%;
        }

        #inhalt {
            margin: 2px 330px 2px 330px;
            min-height:550px;
            border-style:solid;
            min-width:550px;
        }

        #left {
            position: absolute;
            top: 0px;
            left: 10px;
            width: 300px;
            height: 550px;
            border-style:dashed;
        }

        #right {
            position: absolute;
            top: 0px;
            right: 10px;
            width: 300px;
            height: 550px;
            border-style:dashed;
        }
        </style>
    </head>

    <body>
        <div id="header">
                <h1>Header
                </h1>

        </div>    
        <div id="middle">
            <div id="inhalt">
                <h1>Inhalt</h1>
            </div>
            
            <div id="left">
                <h1>Left</h1>
            </div>
            
            <div id="right">
                <h1>Right:</h1>
            </div>
        </div>    
    </body>
</html>
Mein Problem ist, dass wenn ich den Internet Explorer verkleinere, LEFT über INHALT zusammenfließt. Ich möchte dass bei INHALT das ich mit
Code: 
min-width:550px;
definiere auch LEFT anhält und nicht weiter läuft. Ich weiss, dass es an dem Befehl absolute liegt aber mit relative gehts irgendwie auch nciht. Wie kann ich also eine Abhängigkeit von LEFT zu INHALT erstellen mit 10px Abstand zueinander....:oops:

Danke schon im Voraus:?
 
Verzichte generell auf absolute (heißt so, weil es meist absolut unnötig ist) und relative, samt zugehörigen Positionsangaben.
Gib den Boxen, die nebeneinander sollen ein
Code: 
float: left;
und ggf. margin-Werte und cleare nach der dritten Box wieder.
 
Ich glaube mein Ansatz wird nicht ganz verstanden. Also ich will, dass die Box in der Mitte sich dynamisch verhält. und zwar bis zu der min-width;550px: Wenn man den Browser verkleinert, dass es dann anhält sich zu verkleinern bis die Breite von 550px erreicht ist und die rechte Box mit der in der Mitte nicht überläuft, sonder nur bis zu der Breite eben mitgeht und dann auch anhält weiter im Browserfenster mitzulaufen. Dein Tipp habe ich mal ausprobiert und es ergibt nicht mein erwünschtes Ergebnis. Hab ich vielleicht ein Fehler gemacht?? Hier der Code:


Code: 
<html>
    <head>
        <title>My Site</title>
        <style type="text/css">
        body{
            font-family : Verdana, Arial, Helvetica, sans-serif;
            padding: 0px;
            margin: 0px;
            background-color: #FAEBD7;
        }

        h1{
            text-align:center; 
            font-size:20px;
            color:#000000;
            margin-bottom:0px;
        }

        #header 
        {
            position:relative;
            height: 110px;
            margin: 10px;
            min-width:1150px;
            border-style:dotted;
        }

        #middle {
            position: relative;
            width: 100%;
        }

        #inhalt {
            margin:2px 10px;
            min-height:550px;
            border-style:solid;
            min-width:550px;
            float:left;
        }

        #left {
            margin:2px 0px;
            width: 300px;
            height: 550px;
            border-style:dashed;
            float:left;
        }

        #right {
            margin:2px 0px;
            width: 300px;
            height: 550px;
            border-style:dashed;
            float:left;
            clear;both:
        }
        </style>
    </head>

    <body>
        <div id="header">
                <h1>Header
                </h1>

        </div>    
        <div id="middle">
            <div id="left">
                <h1>Left</h1>
            </div>
            
            <div id="inhalt">
                <h1>Inhalt</h1>
            </div>
            
            <div id="right">
                <h1>Right:</h1>
            </div>
        </div>    
    </body>
</html>
 
Wenn #inhalt eine min-width hat, dann kann er tatsächlich doch bis zu 100% breit werden, also volle Fensterbreite.
Kommen dann noch links und rechts je 300px hinzu, so sind das nach dem Boxmodell 600px mehr als 100%. Dann ist für die beiden Seitenspalten kein Platz mehr und sie müssen bei float weichen oder es kommt bei absoluter Positionierung zur Überlappung bzw. der Inhalt liegt außerhalb des Sichtbereichs.

Meines Erachtens musst du den mittleren Teil begrenzen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben