Div mit Float in anderem Div größe anpassen

[chrizzTs]

Hallos zusammen.

Ich habe folgendes Problem:

ich habe ein Div, in welches ich 2 zentriert nebeneinander liegende Divs legen möchte.
Wie mach ich das?

Ich bin jetzt mla wie folgt vorgegnagen:

    <div id="wrapper" class ="container">
        <div id="two-column">
            <div id="tbox1">
            <p id="replyGuestbookEntry"></p>
            <form id="guestbookForm">
            <table>
                <tr>
                    <td>Name: </td>
                    <td><input  type="text" size="62" name="name" placeholder="Max Muster"><td>
                </tr>
                <tr>
                    <td>E-Mail:</td>
                    <td> <input  type="text" size="62" name="email" placeholder="[email protected]"></td>
                </tr>
                <tr>
                    <td>Eintrag:</td>
                    <td><textarea value"Ihr Eintrag" name="eingabe"
                        placeholder="Bitte     geben Sie Ihren Gästebucheintrag ein." cols="45" rows="10"></textarea> </td>
                </tr>
            </table>
            <input id="submit" type="submit"value="Eintrag veröffentlichen">
            </form>

            </div>
           
            <div id="tbox2">
            <p id="col2Entries"></p>
            </div>
        </div>
</div>

#two-column{
        text-align:left;
        border-style:solid;
        border-width:5px;
}
#two-column #tbox1{
        width: 450;
        border-style:solid;
        border-width:5px;
        float: left;
       
}

#two-column #tbox2{
        border-style:solid;
        border-width:5px;
        float: right;

}


        #wrapper
        {

                background: #FFF;
                max-width: 4000px;
                margin: 0 auto;
                text-align: center;
      }

     .container
        {
              
                padding-left: 7em; /* Innenabstand dass nicht bis zum Seitenrand geschrieben wird */
                padding-right: 7em;
              
        }

Ich habe jetzt zum einn das Problem, dass mein div mit der Id wrapper nicht mit wächst.
D.h. meine zwei divs, die nebeneinander liegen beginnen darin, aber überlappen dann einfach in andere divs.

2. Proble. Die 2 Divs die eigentlich zentriert nebneinander stehen sollen, sind links bzw. rechts am Seitenrand ausgerichtet.


Ich knoble jetzt schon echt einige Zeit daran. Also wäre super, wenn ihr mir helfen könntet!
Vielen Dank
lg
Chris

 

[Tronjer]

- Man verwendet für Formulare kein Tabellenlayout
- float left + right in Kombination positioniert Elemente links- und rechtsbündig
- float hebt Elemente aus dem Textfluss. Ohne clear können Elternelemente nicht "mitwachsen".
- Schau dir mal das Gridsystem von Bootstrap an. http://getbootstrap.com/css/#grid

 

[chrizzTs]

- Man verwendet für Formulare kein Tabellenlayout

Wie schaffe ich es sonst, dass meine Formularfelder auf gleicher Höhe beginnen?


Ich habe jetzt meinen Code so umgebaut, dass ich in meinem div biede Divs. mit Float left lege.
So gefällt es mir eigentlich auch ganz gut, möchte nur jetzt gerne dass diese beiden nebeneindnder liegenden Elemente Mittig zu dem Eltern Divs sind.

Wie schaffe ich das denn?

    <div id="wrapper" class ="container">
        <div id="two-column">
            <div>
            <p id="replyGuestbookEntry"></p>
            <form id="guestbookForm">
            <table>
                <tr>
                    <td>Name: </td>
                    <td><input  type="text" size="62" name="name" placeholder="Max Muster"><td>
                </tr>
                <tr>
                    <td>E-Mail:</td>
                    <td> <input  type="text" size="62" name="email" placeholder="[email protected]"></td>
                </tr>
                <tr>
                    <td>Eintrag:</td>
                    <td><textarea value"Ihr Eintrag" name="eingabe"
                        placeholder="Bitte     geben Sie Ihren Gästebucheintrag ein." cols="45" rows="10"></textarea> </td>
                </tr>
            </table>
            <input id="submit" type="submit"value="Eintrag veröffentlichen">
            </form>

            </div>
           
            <div>
            <p id="col2Entries"></p>
            </div>
        </div>

#two-column{
        overflow: hidden;
        text-align:left;
        margin: 0 auto;

}
#two-column div{
      
        float: left;
       
}

 

[Tronjer]

Wie schaffe ich es sonst, dass meine Formularfelder auf gleicher Höhe beginnen?

Ausschließlich per CSS, außerdem verwendet man für die Beschriftungen das Label-Attribut von HTML.

Wie schaffe ich das denn?

In dem du #two-column eine Width gibst, die kleiner die von #wrapper ist.