float fout

Door kenny iets op 19-09-2014 09:06

1.674 views

hallo,
ben bezig met een site maar het wil niet echt lukken
ik proberende 3 divs dat ging goed
tot ik er een onder toevoegenden wan die trek gelijk naar boven onder die andere divs/ rechts
dit is me code


<?php
    session_start();
?>
<html>
<head>
    <title>titel?</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <div id="header">
        <div id="links">
            <img src="http://www.catalogs.com/info/bestof/wp-content/uploads/2011/09/62.jpg" width="172" height="100" align="center" />
        </div>
        
        <div id="midden">
            
        </div>
        
        <div id="rechts">
            <form action="login.php" method="POST">
                Gebruikersnaam:<br />              
                <input type="text" placeholder="gebruikersnaam" name="username" /><br />
                    Wachtwoord:<br />
                     
                    <input type="password" name="password" placeholder="wachtwoord" /><br />
                     
                    <input type="submit"id="login" value="login">
                    
                    <?php if(isset($_SESSION['user']) == true){
                     echo  $_SESSION['user'];
                    }else{echo "login ";
                    }?>
             
            </form>
        </div>
    </div>
	<div class="clear"></div><!-- clear -->


    

 


    <div id="footer"  >
        pizza
    </div>
</body>
</html>

de css


body{
padding: 0px;
margin: 0px;
background-color: #2654BD;

}

#wrapper {
width: 100%;
}

#header {
width: 100%;
height: 100px;
background: #646262;
}

#links {
width: 33.3%;
height: 400px;

float: left;
}

#midden {
width: 33.3%;
height: 400px;

float: left;
left: 20%;
}

#rechts{
width: 33.3%;
height: 100px;
float: left;
left: 80%;
display:inline-block;


}

#header{
	width:100%;
	height: 100px;
	background-color:#646262;
	}
input[type=submit] {
padding:5px 15px; background:#26AEBD; border:10px;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }


#login{
	{
padding:5px 15px; background:#26AEBD; border:10px;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
#middenlinks {
width: 33.3%;
height: 400px;

clear: both;
}
#footer {
width: 100%;
height: 100px;
background: green;

clear: both;
}


.clear { clear:both; }

zoals je zie heb ik ook al clear:both geprobeert