Div-Boxen nebeneinander

schiese · 8. August 2006

Hallo,
ich möchte mich in CSS einarbeiten und bin gleich auf ein Problem gestoßen.
Un zwar kriege ich es nicht hin, das die beiden Boxen nebeneinander stehen! Wenn es Tabellen wären, würde ich in die erste bloß align="left" schreiben und ich habe sie nebeneinander, aber hier funktioniert es nicht!

Code:

<html>
<head>
<title>Div-Klassen</title>
<style type="text/css">
<!--

#haupt{
width:800px;
font-size:9pt;
font-family:Arial;
border:1px solid black;
padding: 10 10 10 10;
align:center;
}

#box1{
width:100px;
height:100px;
font-size:8pt;
font-family:Arial;
padding: 5 5 5 5;
border:1px solid black;
margin: 0 0 10 0;
}

//-->
</style>
</head>
<body>

<div id="haupt">

<div id="box1" align="left">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

<div id="box1">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</div>

</div>


</body>
</html>

Danke schiese

Maik · 8. August 2006

Erweiter die CSS-Regel für die #box1 mit der float:left-Eigenschaft und füge noch ein DIV.clear hinzu, damit nach den floatenden Boxen wieder der normale Textfluss im Dokument hergestellt wird.

Zudem hast du bei den padding- und margin-Werten die Einheit (px) vergessen.

Code:

#haupt{
width:800px;
font-size:9pt;
font-family:Arial;
border:1px solid black;
padding: 10px;
text-align:center;
}

#box1{
width:100px;
height:100px;
font-size:8pt;
font-family:Arial;
padding: 5px;
border:1px solid black;
margin: 0 0 10px 0;
float:left;
}

.clear {
clear:left;
}

Das zweite DIV mußt du in #box2 umbenennen, da eine ID in einem Dokument nur einmal vergeben werden darf:

HTML:

<div id="haupt">
     <div id="box1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
     <div id="box2">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
     <div class="clear"></div>
</div>

Div-Boxen nebeneinander

schiese

Erfahrenes Mitglied

Maik

Neue Beiträge