CODEWITHSUNDEEP
csshtmlcss-float
Olubunmi
Olubunmi

Reputation: 91

container div not applyin background-color to the two floating divs inside it

I'm trying to apply background-color to a div that has two floating divs inside it, but it is not applying it. both divs inside the container are cleared and displaying beside each other like i want tehm to be, but the overall background-color is not applying

jsfiddle here

 <div class="contactformcontainer">
    <div class="maincontactform">
      <h4>SEND US A MAIL</h4>
      <form>
        <input type="text" placeholder="What is your name ?">
        <input type="text" placeholder="Email">
        <textarea type="text" placeholder="What is your message to us ?"></textarea> 
        <input type="submit" value="submit">
      </form>
    </div>
    <div class="maincontactdetails">
      <h4>Email : </h4><p>[email protected]</p>
      <h4>Tel : </h4><p>(434)-5564-63443534</p>
      <h4>Address : </h4><p>blah blah blah.</p>
    </div>
    </div>

CSS

 .contactformcontainer{
width:100%;
background-color: green;
}

.maincontactform{
width: 47%;
padding: 24px;
float:left;
background-color: blue;
clear:both;
  }

 .maincontactdetails{
width: 40%;
padding: 24px;
background-color: red;
float:right;
}

Upvotes: 1

Views: 4308

Answers (3)

Stefan Surkamp
Stefan Surkamp

Reputation: 992

Adding position: absolute; might solve your problem.

See this fiddle.

Upvotes: 1

Connor Atherton
Connor Atherton

Reputation: 161

The good old clearfix "hack" is needed here. To force the container to self-clear its children give the div with a class of contactformcontainer another class of clearfix and add these styles

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html .clearfix { height: 1%; }
.clearfix { display: block; }

Or just float the outer container to the left , your choice :)

Upvotes: 1

Alfie
Alfie

Reputation: 2350

float: left; .contactformcontainer :)

.contactformcontainer{
  float: left;
  width:100%;
  background-color: green;
}

Upvotes: 3

Related Questions