Didi: Divs nebeneinander bzw. übereinander

Beitrag lesen

SELF-Forum

Divs nebeneinander bzw. übereinander

Didi
– Informationen zu den Bewertungsregeln

Guten Abend,

ich versuche gerade ein Template für Joomla zu erstellen, allerdings habe ich noch zwei kleine Probleme:
Zwei Divs ("Suchen" und "Social Networks") sollen übereinander sein. Außerdem User4, User5 und User6 nebeneinander. Doch bei mir sieht es so aus:

http://s7.directupload.net/images/110810/ii7dq7fe.png

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
	<link href="template.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
  
<div id="container">  
	<div id="header">  
    Header  
    	<div id="search">  
        Suche  
        </div>  
        <div id="social_networks">  
        Social Network  
    </div>  
	</div>  
  
    <div id="navi">  
  
    </div>  
  
    <div id="user_top">  
    	<div id="user1">  
        User1  
        </div>  
        <div id="user2">  
        User2  
        </div>  
        <div id="user3">  
        User3  
        </div>  
    </div>  
  
    <div id="center">  
    	<div id="content">  
        content  
        </div>  
        <div id="right">  
        Right  
        </div>  
    </div>  
  
    <div id="user_bottom">  
    	<div id="user4">  
        User4  
        </div>  
        <div id="user5">  
        User5  
        </div>  
        <div id="user6">  
        Use6  
        </div>  
    </div>  
  
    <div id="footer">  
    Footer  
    </div>  
  
</div>  
</body>  
</html>

CSS:

@charset "utf-8";  
/* CSS Document */  
  
html{  
	width: 101%;  
}  
  
body{  
	background: url(../background.png);  
	color: #000;  
	font: Arial, Helvetica, sans-serif;  
	font-size:12px;  
}  
  
#container{  
	background: #0F0 ;  
	width:1000px;  
	margin: 0 auto;  
	padding: 0px;  
}  
  
#header{  
	background: #03F;  
	width: 1000px;  
	height: 200px;  
}  
  
#search{  
	background:#333;  
	width: 150px;  
	height: 20px;  
	float: right;  
}  
  
#social_networks{  
	background: #FFF;  
	width: 50px;  
	height: 50px;  
	float: right;  
}  
  
#navi{  
	background: #300;  
	width: 1000px;  
	height: 50px;  
}  
  
#user_top{  
	background: #F00;  
	width: 1000px;  
	height: 150px;  
}  
  
#user1{  
	background: #066;  
	width: 333px;  
	height: 150px;  
	float: left;  
}  
  
#user2{  
	background: #096;  
	width: 333px;  
	height: 150px;  
	float: left;  
}  
  
#user3{  
	background: #0C6;  
	width: 333px;  
	height: 150px;  
	float: right;  
}  
  
#content{  
	background: #60F;  
	width: 800px;  
	float:left;  
}  
  
#right{  
	background: #FF0;  
	width: 200px;  
	float: right;  
}  
  
#user_bottom{  
	background: #0FF;  
	width: 1000px;  
	height: 150px;  
}  
  
#user4{  
	background: #066;  
	width: 333px;  
	height: 150px;  
	float: left;  
}  
  
#user5{  
	background: #096;  
	width: 333px;  
	height: 150px;  
	float: left;  
}  
  
#user6{  
	background: #0C6;  
	width: 333px;  
	height: 150px;  
	float: right;  
}	  
  
#footer{  
	background: #F0F;  
	width: 1000px;  
  
}

Was mache ich falsch?

Mfg Didi

Beitrag melden
–
Informationen zu den Bewertungsregeln