Zur Navigation

div-Container nebeneinander positionieren

1 Tilman

Hallo!

Ich möchte mit Hilfe von div-Containern eine Art Spalten herstellen (so dass ich keine Tabelle mehr brauche).

Wenn ich aber zwei div-Conainer hintereinander im HTML-code schreibe, dann werden sie immer untereinander angezeigt.
Beispiel:
<div>Inhalt 1</div>
<div>Inhalt 2</div>
Browser:
Inhalt 1
Inhalt 2


Wie kann ich die beiden Container nebeneinander poisitionieren?

20.01.2008 15:22

2 Rudy

Indem Du die Divs floatest:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>Float / Clear</title>
<style type="text/css">
<!--
div#all { background: #ffff00; width: 750px; }
div#inhalt-1, div#inhalt-2 { background: #0000ff; float: left; width: 50%; }
div#inhalt-2 { background: #ff0000; }
div#footer { clear: left; }
-->
</style>
</head>
<body>
<div id="all">
  <div id="inhalt-1">
    Inhalt 1
  </div>
  <div id="inhalt-2">
    Inhalt 2
  </div>
  <div id="footer"></div>
</div>

</body>
</html>

Siehe auch:
http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss#float
http://www.css4you.de/float.html
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

20.01.2008 15:39 | geändert: 20.01.2008 23:02

3 Käptn Blaubär

... wobei die CSS-Angaben in den head gehören ;-)

20.01.2008 22:00

4 Rudy

Ups! Korrigiert :)

20.01.2008 23:02

5 Tilman

Ähh, könntest du mir ein Div-Container-Code schreiben, der dann so aussieht, wie diese Tabelle?

<table width="630" border="0" ...>
<tr><td colspan="2" width="500" ...>...</td><td width="160" rowspan="2">...</td></tr>
<tr><td width="250" ...>...</td><td width="250" ...>...</td></tr></table>

21.01.2008 16:49

6 Jörg Kruse

Das kannst du über eine passende Verschachtelung der Divs erreichen

Zuerst floatest du zwei äußere Div-Container mit einer Breite von 500 bzw. 160px. Innerhalb des linken Container bringst du dann drei weitere Divs unter - das erste wird ohne weitere Angaben wie gewünscht angezeigt, die letzten beiden positionierst du wieder mittels float:left nebeneinander

21.01.2008 21:58

7 Tilman

Ne, ich krieg das irgendwie nicht hin!

Den Code habe ich benutzt:

<div style="width: 500px;">
<div style="width: 100%; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px;"><h3>ABC-Kino</h3></div>
<div style="width: 250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left;">Herzogstraße 1</div>
<div style="width: 250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left;">Herzogstraße 2</div>
<div style="clear: left;"></div></div>

Dieses Floaten will irgendwie nicht!

26.01.2008 22:45

8 Jörg Kruse

Abstände (padding, margin und border) müssen noch zur Breite hinzugezählt werden. In dem Fall hast du (250px + 5px + 5px) * 2 = 520px. So sollte es funktionieren:

<div style="width: 520px;">
<div style="width: 100%; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px;"><h3>ABC-Kino</h3></div>
<div style="width: 250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left;">Herzogstraße 1</div>
<div style="width: 250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left;">Herzogstraße 2</div>
<div style="clear: left;"></div></div>

Oder du ziehst das Padding von der Breite ab

26.01.2008 23:19 | geändert: 26.01.2008 23:20

... 3 Jahre später ...

9 Paul (Gast)

danke leute

19.01.2011 13:25

... 5 Monate später ...

10 Silahel (Gast)

Ok Leute ich hab mal das hier versucht aber ich hab ein Problem mit dem letzten (dass soll eigentlich auch im Großem <div> sein) was mach ich falsch??

<div style="width:200px;height:150px;background-color:green;">
<div style="background-color:red   ;height:100% ;width:50px;float:left;"></div>
<div style="background-color:blue  ;height:100% ;width:70px;float:left;">
<div style="background-color:yellow;height:100px;width:70px;float:left;"></div>
<div style="background-color:grey  ;height:50px ;width:70px;float:left;"></div>
</div>
<div style="background-color:orange;height:150px;width:80;float:left"></div>
		</div>
Bitte helft mir ): Villeicht hilft es ja auch den ein oder anderen von euch...

04.07.2011 17:38