div-Container

[Ogniquok]

hey leute!
hab mal ne frage zu folgenden div-containern:

Code: Alles auswählen

<div id="1" style="border-style: solid; border-width: 3px; width: 300px; height: 500px; margin: 10px;">
	<div id="2" style="border-style: solid; border-width: 3px; width: 100px; height: 50px; margin: 10px;"></div>
	<div id="3" style="border-style: solid; border-width: 3px; width: 100px; height: 50px; margin: 10px;"></div>
</div>

wie schaff ich es, dass der 3. container neben dem 2. container im 1. container angezeigt wird, und nicht unter ihm?

[piero]

mit dem attribut "float" und wert "left"
das bedeutet, dass das alles was nach diesem elemnt kommt, rehts um das element "fliesst"

Code: Alles auswählen

<div id="1" style="border-style: solid; border-width: 3px; width: 300px; height: 500px; margin: 10px;">
   <div id="2" style="border-style: solid; border-width: 3px; width: 100px; height: 50px; margin: 10px; float: left;"></div>
   <div id="3" style="border-style: solid; border-width: 3px; width: 100px; height: 50px; margin: 10px;"></div>
</div>

[gn#36]

Alternativ wenn du sowieso schon feste Breiten hast kannst du auch eine Feste Position angeben (position: fixed; left: x px; top: x px;)

[luigee]

die beste Lösung ist mit float:left....ein anschließendes DIV mit clear:both um die Anordnung wieder aufzuheben sollte auch nicht vergessen werden.

Code: Alles auswählen

<div id="1" style="border-style: solid; border-width: 3px; width: 300px; height: 500px; margin: 10px;">
   <div id="2" style="border-style: solid; border-width: 3px; width: 100px; height: 50px; margin: 10px; float: left;"></div>
   <div id="3" style="border-style: solid; border-width: 3px; width: 100px; height: 50px; margin: 10px; float: left"></div>
   <div style="clear:both"></div>
</div>