Ich möchte mit CSS ein Design machen, nun habe ich aber ein Problem. Ich möchte zwei <div> Boxen nebeneinander stellen, doch irgendwie ist das nicht möglich. Die <div> Boxen erscheinen immer Untereinander.
Zur veranschaulichung habe ich hier noch ein Bild:
http://raphibolliger.ch/upload/css_design.png
Grössere Bilder bitte nur Verlinken. Siehe dazu im KB:knigge den Absatz zu Avataren und Bildern. OXPUS
Nun soll der Teil mit dem Inhalt "Startseite" rechts neben die Navigaiton...
float: left; habe ich bereits probiert, dies geht nicht weill dann die Box nicht mehr in der vordefinierten div class="all" drin ist und die grösse Frei verändert nicht mit den anderen Boxen zusammen.
Hier noch de Quellcode:
Code: Alles auswählen
div.all {
border: 1px solid #4F81BD;
width: 990px;
margin: 0 auto;
}
div.header{
border: 1px solid #4F81BD;
margin: 2px;
height: 100px;
background-image: url(images/header.png);
}
div.menu{
border: 1px solid #4F81BD;
width: 200px;
margin-left: 2px;
margin-bottom: 2px;
}
div.inhalt{
border: 1px solid #4F81BD;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
padding: 8px;
}
div.footer {
border: 1px solid #4F81BD;
margin-left: 2px;
margin-bottom: 2px;
margin-right: 2px;
font-family: Verdana;
font-size: 10px;
text-align: center;
color: #4F81BD;
padding: 2px;
background-color: #F6F6F6;
}
h1{
font-family: Trebuchet MS;
color: #17365D;
font-size: 22px;
border-bottom-width: 1px;
border-bottom-color: #17365D;
border-bottom-style: solid;
}
p{
font-family: Verdana;
color: gray;
font-size: 14px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
div.menu1 {
padding: 8px;
padding-left: 20px;
font-family: Verdana;
font-size: 14px;
color: #17365D;
text-decoration: none;
}
/* Definition des Hauptmenü auf Ebene 1 */
div.menu1:hover {
background: #4F81BD;
background-image: url(images/menu1.png);
padding: 8px
padding-left: 20px;
font-family: Verdana;
font-size: 14px;
color: white;
text-decoration: none;
}
/* Definition des Submenü 1 auf Ebene 2 */
div.menu2 {
padding-left: 27px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 11px;
color: #17365D;
text-decoration: none;
}
div.menu2:hover {
padding-left: 27px;
padding-top: 5px;
padding-bottom: 5px;
background: #B6C9E0;
font-family: Verdana;
font-size: 11px;
color: #17365D;
text-decoration: none;
}mfg bairan
