Zach Curtis Zach Curtis - 3 months ago 7
CSS Question

Why is this div completely broken?

I have no idea whats going on here. Have a form contained in a div, and the div has a background color.

It works on one part of my website, but just doesn't work at all on another. Here's a Jsfiddle of whats going on

Also the affected code posted here:



form {
text-align: center;
}

input {
font-family: 'Cabin', sans-serif;
}

.submit-button {
text-decoration: none;
width: 80%;
background-color: white;
text-align: center;
height: 35px;
border-radius: 10px;
display: inline-block;

}

.input-half {
width: 40%;
display: inline-block;
float: left;
margin-left: 5%;
margin-right: 5%;
}

.input-half-2 {
width: 40%;
display: inline-block;
float: right;
margin-left: 5%;
margin-right: 5%;
}

input[type=text]:focus {
background-color: lightblue;
}


.contact-contain {
background-color: lightgray;
max-width: 100%;
}

.image-back {
width: 100%;
}

#back-img {
width: 100%
}

.cont-textarea {
resize: none;
width: 80%;
height: 110px;
}

<div class="contact-contain" id="link-c"><br>
<h1>Contact Over The Horizon:</h1><br><br>
<form>
<div class="input-half">
<label for="contname">Your Name</label><br>
<input class="input-box" type="text" name="contname"><br>
<label for="eaddress">Your Email</label><br>
<input class="input-box" type="text" name="eaddress"><br>
<label for="subj">Message Subject</label><br>
<input class="input-box" type="text" name="subj">
</div>
<div class="input-half-2">
<label for="contactmsg">Message Content</label><br><br>
<textarea class="cont-textarea"></textarea><br><br>
<button class="submit-button" type="submit" name="submitq" value="Send"><span>Submit Quote</span></button><br>
</div>
</form>
</div><br>




Answer

Wild guess: You want your div to contain your form (which has zero height). Do this:

.contact-contain {
    overflow: hidden;
}

Demo

Comments