CSS: Float Problem

Pilleslife

Hallo,

ich bin dabei mein neues Homepagedesign umzusetzen. Leider stoße auf ein CSS Problem. Schaut es euch einfach an: hier

Die box mit dem Inhalt "Right" soll neben die Box "Test". Ich habe "Right" gefloatet. Wenn ich beide floate sind beide boxen "unten". Wie bekomme ich es hin, dass beide in der Mitte sind.

Auch für die runden Ecken muss ich mir noch was einfallen lassen. Diese sind nur mit dem Firefox kompatibel.

Hat jetzt schon jemand ein Verbesserungsvorschlag?

Hier die HTML datei:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pilleslife - Startseite</title>

<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">


</script>
</head>

<body>
<div id="wrapper">
	<div id="header"></div>
    <div class="navi">

    </div>
    <div id="header2"></div>
    <div class="navi"></div>   
        <div id="content">
		<div class="content">
			Test
		</div>
		<div class="right">
			Right
		</div>
    </div>
    <div id="footer"></div> 
</div>
</body>
</html>

und hier die css

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:

@charset "utf-8";
/* CSS Document */

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-image:url(images/background.gif);
 background-repeat:repeat-x;
 background-color:#FFFFFF;
}

#wrapper { 
 margin: 0 auto;
 width: 600px;
 border:thin #999999 solid;
}

#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:153px;
width:600px;
background-color:#39abcb;
}


.navi
{
background-image:url(images/middle.jpg);
background-repeat:repeat-x;
height:30px;
width:auto;
background-color:#333333;
}


#header2{
background-image:url(images/header2.gif);
background-repeat:no-repeat;
width:600px;
height:67px;
}

#content{
display:block;
float:none;
}

#footer
{
background-image:url(images/middle.jpg);
background-repeat:repeat-x;
height:30px;
width:auto;
background-color:#333333;
}

li{
display:inline;
padding-left: 15px;
}

.content{
padding: 20px 15px;
margin: 25px 10px;
width: 300px;
border:solid medium #999999; 
-moz-border-radius:20px;
background-color:#FFFFFF;
}

.right{
padding: 20px 15px;
float:right;
width: 100px;
margin: 25px 10px;
border:solid medium #999999; 
-moz-border-radius:20px;
background-color:#FFFFFF;
display:block;
}

Danke für eure Hilfe.

Gruß
Pilleslife

Biggi

Versuch mal, dem footer clear:both; zuzuweisen.
Das Floaten sollte ja schließlich irgendwo wieder aufgehoben werden.

Edit
Und zu runden Ecken schau mal hier vorbei:
http://www.cssplay.co.uk/boxes/krazy.html

Pilleslife

Danke dass man float aufheben muss habe ich nicht gewusst.

Aus reinem Interesse, wie bringt man dann drei boxen nebeneinander?

Danke. Das mit den Ecken werde ich mir mal anschauen.

codingnoob

Drei Boxen:
- Zwei floaten links, eine rechts; pass aber auf, 2 vertauschen dann afaik ihre Position
- Eine Box floatet links, eine rechts; in einer der beiden floaten wieder 2 Boxen
- Eine Box floatet links, eine rechts, eine steht in der Mitte.

Es gibt Möglichkeiten und wie du sie umsetzen kannst siehst du z.B. bei CSS 4 You, unten Beispiel 10 unter anderem.