<Article> passt sich nicht an beinhaltete <Form> an

[projectx_cr]

Hallo,

ich weiss nicht wieso, ich habe mittels CSS meine Article-Tags bearbeitet. Auf anderen Seiten bei denen ich das <article> - Tag benutze, wird die größe (Height) automatisch an den Inhalt (zB News) angepasst.

Ich habe jetzt eine Form, welche in einem <article> Tag ist. Leider geht die Form aber immer über den article hinaus bzw. er ändert seine Größe nicht, damit die Form reinpasst.

Hier die Seite:

<article>
<form name="create_location_form" id="createlocation_form" action="sdswd">
    <div id="createlocation_leftbox">
        <h2>Stammdaten</h2><br>
        <label>Name:</label><br>
        <input type="text" name="name"></input><br>
        <label>Strasse:</label><br>
        <input type="text" name="street"></input><br>
        <label>Postleitzahl:</label><br>
        <input type="text" name="zipcode"></input><br>
        <label>Ort:</label><br>
        <input type="text" name="city"></input><br>
        <label>Telefon:</label><br>
        <input type="text" name="phone"></input><br>
        <label>Email:</label><br>
        <input type="text" name="email"></input><br>
        <label>Webseite:</label><br>
        <input type="text" name="website"></input>
    </div>
    <div id="createlocation_rightbox">
        <h2>Erweiterte Daten</h2><br>
        <label>Name:</label><br>
        <input type="text" name="name"></input><br>
        <label>Strasse:</label><br>
        <input type="text" name="street"></input><br>
        <label>Postleitzahl:</label><br>
        <input type="text" name="zipcode"></input><br>
        <label>Ort:</label><br>
        <input type="text" name="city"></input><br>
        <label>Telefon:</label><br>
        <input type="text" name="phone"></input><br>
        <label>Email:</label><br>
        <input type="text" name="email"></input><br>
        <label>Webseite:</label><br>
        <input type="text" name="website"></input>
    </div>
</form>
</article>

CSS für article:

article {
  background: white;
  /*border: 1px solid #770085;*/
  border: 1px solid #D9D9D9;
  padding: 15px;
  margin-bottom: 15px;
  height:auto;
}

Bitte um Hilfe

 

[Tronjer]

Ein nicht durch Größenangaben definiertes Blockelement passt sich normaler Weise den darin liegenden Kindelementen an. Es sei denn, diese werden durch CSS-Attribute wie position oder float aus dem Textfluss herausgehoben.

 

[projectx_cr]

Also das Parent-Element (Article) hat kein Float. Die Childelemente hab ich Float gesetzt, damit sie nebeneinander liegen.

Ich habe gelesen dass es bei dem vorhaben immer Probleme gibt und man ein workarround nutzen muss.

Ich habe jetzt ein Spacer hinzugefügt.
<divclass="spacer"style="clear: both;"></div>

Damit hat es funktioniert.

 

[Tronjer]

Jupp, das ist eine Möglichkeit. Eine andere wäre der Einsatz eines Frameworks wie Bootstrap. Damit erspart man sich den Workaround mit leeren HTML-Elementen.

 

[Banana_Jones]

Eine weitere Möglichkeit ist ein "overflow:hidden" auf das umgebende Element (in diesem Fall <article>) zu setzen.