Why does the inner div go outside its outer div?

Hmm... It's hard to say without playing around with that code. What if you comment out the contact form and just leave the "Betreff" and "Nachricht"?

Hi!

Did you try position: relative on the inner div?

Make sure your outer div, body and HTML wrappers also have a width and a height of 100%

Position: relative didnt work. Naww. But thanks!

The outer div has a width and height of 100%, the content div in which all of this is placed, on the other hand, has a width of some 770px. Maybe it has to do with that?

Thank you both for quick answers, though! =D

I'm just trying to picture what you're doing. How close is this CodePen to what you're doing?

(Note, I had to set the inner-div width to 90% to account for the 5% padding on the left and right.)

Background colors are merely so you can see the containers. Of course, you can set body margins to whatever, and the outer-div width to whatever, I'm just trying to visualize what you're asking.

Yes, this is spot on what I have!

Now the thing is, that these divs come from the contactform 7 plugin.

The html looks like this:

<div id="kontaktformular">

<table class="kontakt_table"><tr><td> [text* name id:kontakt_name class:kontaktformular placeholder "Ihr Name"]</td><td> [email* email id:kontakt_email class:kontaktformular placeholder "Ihre E-mail"]</td> </tr> </table> <div class="kontakt_table"><div> [text* betreff id:kontakt_betreff class:kontaktformular placeholder "Betreff"]</div><div> [textarea* nachricht id:kontakt_nachricht class:kontaktformular placeholder "Ihre Nachricht"]</div></div> </div>

and the css:

/* Kontaktformular */

.kontaktformular { padding: 10px; margin-bottom: 16px; border: none; border-bottom: 2px solid #4D4D4D; border-radius: 3px 3px 0 0; }

#kontakt_name, 
#kontakt_email {
    float: left;
    width: 92%;
}

#kontakt_email{
    float: right;
}
    .kontakt_table {
        width: 100%;
        height: 100%;
    }


#kontakt_betreff,
#kontakt_nachricht {
    width: 100%;
}

The table is there to put the first two fields in a row.... unsure if this is the best way to do this, but it works.

What doesn't work, are the two after that ("Betreff" and "Nachricht"). They jump outside the outer divs!

It works for you in the CodePen, so could this have do do anything with the plugin it self? But why do then upper two fields work, and not the lower fields? (I tried putting the last two fields into a table as well, but that doesnt help...)

hmmmm...

oh thats weird, the html code disappeard..

here it comes again (if this works ^^):

<xmp>

<div id="kontaktformular">

<table class="kontakt_table"><tr><td> [text* name id:kontakt_name class:kontaktformular placeholder "Ihr Name"]</td><td> [email* email id:kontakt_email class:kontaktformular placeholder "Ihre E-mail"]</td> </tr> </table> <div class="kontakt_table"><div> [text* betreff id:kontakt_betreff class:kontaktformular placeholder "Betreff"]</div><div> [textarea* nachricht id:kontakt_nachricht class:kontaktformular placeholder "Ihre Nachricht"]</div></div> </div>

</xmp>

nope, doesnt work... hmm

What a great idea! Thank you, Ill try that =)