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

[ERLEDIGT] Dynamisches Div anhand von Fenster Breite pos & width

F

fothik

Neues Mitglied
Guten Tag liebe html.de Community

Ich versuche seit geraumer Zeit folgendes zu erreichen.
Ich habe 2 Hauptelemente auf der Webseite
Main und Content
Das Element Content, soll unabhängig von der Browser breite rechts neben dem Element Main den Rest der Fläche ausfüllen (mit einem margin von 5px links & rechts das ist aber nebensache). Reicht der Platz nicht mehr für beide Elemente nebeneinander aus weil das Fenster zu wenig breit ist, soll das Element Content unter das Element Main verschoben werden. mit einer min-width von 300px.

Die Gewünschte Position anhand der Fensterbreite erreiche ich, jedoch nicht, dass sich das Element Content mit der Fensterbreite mit verbreitert / verschmälert bis mindestens 300px max "unendlich".

Code: 
<html>
<head>
<title>Test</title>
<style>
#Main {
    width: 300px;
    height: 500px;
    background-color: grey;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    }
#content{
        height: 200px;
        min-width: 300px;
        background-color: green;
        float: left;
        margin-left: 5px;
        margin-top: 5px;
        margin-right 5px;
        }

</style>
</head>
<body>
<div id="Main"></div>
<div id="content"></div>

</body>
</html>

Geht dies mit CSS überhaupt?
Vielen Dank für Feedback
 
Werbung:
fothik schrieb:
Das Element Content, soll unabhängig von der Browser breite rechts neben dem Element Main den Rest der Fläche ausfüllen (mit einem margin von 5px links & rechts das ist aber nebensache). Reicht der Platz nicht mehr für beide Elemente nebeneinander aus weil das Fenster zu wenig breit ist, soll das Element Content unter das Element Main verschoben werden. mit einer min-width von 300px.

Die Gewünschte Position anhand der Fensterbreite erreiche ich, jedoch nicht, dass sich das Element Content mit der Fensterbreite mit verbreitert / verschmälert bis mindestens 300px max "unendlich".

Geht dies mit CSS überhaupt?
Zum Vergrößern anklicken....
Ja, mit Flexbox anstelle von float.
In Verbindung mit Media Queries: https://wiki.selfhtml.org/wiki/CSS/Media_Queries (siehe #chapter11), um Breakpoints definieren zu können (siehe #chapter9).

Hinweis: Der Blogeintrag stammt aus 2013, als Flexbox noch nicht in allen Browsern etabliert war, wie es heute, 2017, Stand der Technik ist - entsprechend sind die Anmerkungen/Kommentare des Autors bzgl. der Browserunterstützung einzuordnen.
 
Spicelab schrieb:
Ja, mit Flexbox anstelle von float.
Zum Vergrößern anklicken....

Ahaaaaaaa, Super vielendank :)! Funktioniert genau so wie erwartet :p

Code: 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
    * {
        margin:0 auto;
        padding:0.3em;
        
        }       
    #Main {
        height: 35em;
        width: 25em;
        background-color: grey;
        margin-bottom:0.3em;
        }
    #content{
        height: 5em;
        width: 25em;
        background-color: green;
        }

    @media screen and (min-width : 55em)
        {
            #container {
                    display:-webkit-flex;
                    display:flex;
                    }

            #content{
                    -webkit-flex:1;
                    flex:1;
                    }
        }
</style>
</head>
<body id="container">
<div id="Main"></div>
<div id="content"></div>

</body>
</html>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben