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

[ERLEDIGT] <div> sitzt eine Zeile tiefer

_Felix_

Neues Mitglied
Hallo,
ich habe ein problem welches sich irgendwie nicht lösen lässt. Es handelt sich hierum eigentlich um etwas vollkommen einfaches aber es funktioniert einfach nicht:

hier erstmal der Code:
HTML:
<!doctype html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
        <style>
            body{
                margin: 0px;
            }
            a{
                text-decoration: none;
                color: white;
            }
            .flurry{
                font-family: 'Bungee Shade', cursive;
                font-size: 20px;
                margin-left: 10%;
                background-color: red;
                width: 50%;
            }
            .header{
                width: 100%;
                background-color: #3c3c3c;
                opacity: 0.8;
                -webkit-transition-duration: 1.5s;
            }
            .header:hover{
                width: 100%;
                background-color: #3c3c3c;
                opacity: 1.0;
            }
            .menu{
             font-family: 'Bungee Shade', cursive;
                font-size: 20px;
                background-color: blue;
                width: 10%;
                float: right;
            }

        </style>
     
    </head>
    <body>
     
        <div class="header">
            <div class="flurry">
                <a href="http://flurrylp.de">FlurrY</a>
            </div>
            <div class="menu">
                Menü
            </div>
         
        </div>
 
    </body>
</html>

Problem ist nun, dass das menü nicht in den header möchte wie in folgendem Bild zu sehen:

unknown.png
PS: die sind nur in den Farben damit ich eine Übersicht habe xd

Vielen Dank schon mal im Voraus
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Und immer beachten: Kein float ohne clear.
Sowie: Ein einzelnes zu umfliessendes Element (hier Klasse .menu) wird im Markup zuerst genannt.
HTML:
<div class="header">
    <div class="menu">
        Menü
    </div>
    <div class="flurry">
       <a href="http://flurrylp.de">FlurrY</a>
    </div>
</div>
So rückt es nach oben zur angedachten Position innerhalb <header>.
 
Werbung:
Zurück
Oben