✔ Text nebeneinander (sofern Platz)

[ZodiacXP]

Hoioi.

In einer meiner Seiten gibt es zwei Elemente die ich gerne nebeneinander haben möchte sofern der Platz reicht. Dies könnte ganz einfach über float:left und max-width:50% für beide gehen jedoch möchte ich ohne width (im zweiten Element) arbeiten.

<form method="post" style="float:left; width:40em;">
	<label>Neue Nachricht: </label>
	<input name="titel" maxlength="32" size="32" /><br />
	<textarea name="nachricht" rows="10" cols="50"></textarea><br/>
	<input type="submit" />
</form>

<dl style="float:left; width: 40em; min-width:40em;">
	<?php echo $this->item; ?>
</dl>

Hier stimmt das aussehen (in Chrome) jedoch soll DL nicht in der Breite begrenzt werden sondern lediglich eine minimale Breite haben.

<dl style="float:left; min-width:40em;">

Das bewirkt allerdings, dass DL wieder unter FORM angezeigt wird.

Wie kann ich ein aussehen ähnlich zweier Tabellenzellen nebeneinander bewirken?

P.S. : margin-left habe ich probiert, macht's noch schlimmer.

 

[Quaese]

Hi,

lass mal das float: left in der rechten Spalte weg. Stattdessen setzt du den margin-left-Wert auf die Breite der linken Spalte.

<form method="post" style="float:left; width:20em; background: #0f0;">
  <label>Neue Nachricht: </label>
  <input name="titel" maxlength="32" size="32" /><br />
  <textarea name="nachricht" rows="10" cols="30"></textarea><br/>
  <input type="submit" />
</form>

<dl style="margin-left: 20em; min-width:20em; background: #f00;">
  <dt>Definitions Term</dt>
  <dd>
    Definitions-Beschreibung
  </dd>
</dl>

Ciao
Quaese

 

[ZodiacXP]

Wie gesagt löst margin-left das Problem noch nicht. Sobald das Fenster zu klein wird um beide nebeneinander zu haben rutscht das (zuvor) rechte Element unter das (zuvor) linke mit einem enormen Abstand zur linken Seite.

Habs grad per Zufall genau so wie es soll:

<form method="post" style="float:left; width:20em; background: #0f0;">
  <label>Neue Nachricht: </label>
  <input name="titel" maxlength="32" size="32" /><br />
  <textarea name="nachricht" rows="10" cols="30"></textarea><br/>
  <input type="submit" />
</form>
 
<dl style="display: table-cell; background: #f00;">
  <dt style="display: inline-block; width: 20em;">Definitions Term</dt>
  <dd>
    Definitions-Beschreibung
  </dd>
</dl>