CODEWITHSUNDEEP
htmlcss
acr
acr

Reputation: 1746

Add parent DIV css properties to child DIVs

I have a parent DIV wrap and 3 main child DIVs.inputQ,inputQL,inputQR. I am using a background color for wrap, but this color is not showing up for inputQL, inputQR.Since inputQL, inputQR are inside wrap, I believe its background color should be added to child one as well. I am a beginner in this area, can you please let me what is wrong here ? how can I add same background color for inputQL, inputQR ?

Fiddle : https://jsfiddle.net/anoopcr/hfmghkp0/

<div class="wrap">

  <div class="inputQ">
    <div class="InputQuest">Text Middle</div>
    <div><input id="amnttext" class="textbox"></input></div>
  </div>

  <div class="inputQL">
    <div class="InputQuest">Text Left</div>
    <div><input id="loandtext" class="textbox"></input></div>
  </div>

  <div class="inputQR">
    <div class="InputQuest">Text Right</div>
    <div><input id="emidtext" class="textbox"></input></div>
  </div>

</div>

CSS:

.wrap {
  width: 80%;
  margin-top: 80px;
  margin: auto;
  padding: 10px;
  background:#eee;
}



.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }



.InputQuest
{
    width:50%;
    float:left;
    font-family: arial;
    font-size:18px;
    text-align:center;
    line-height: 30px;
    margin:auto;
}


.textbox
{
  float:left;
  margin:auto;
  font-size:16px;
  font-family: verdana;
  padding:5px;
  border:1px solid #ccc;
  border-radius:4px;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  width:30%;
}

Upvotes: 1

Views: 82

Answers (1)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

You Also neede to cell .wrap { overflow: hidden; } try this

.wrap {
  width: 80%;
  margin-top: 80px;
  margin: auto;
  padding: 10px;
  background:#eee;
  overflow: hidden;
}



.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }



.InputQuest
{
	width:50%;
	float:left;
	font-family: arial;
	font-size:18px;
	text-align:center;
	line-height: 30px;
	margin:auto;
}


.textbox
{
  float:left;
  margin:auto;
  font-size:16px;
  font-family: verdana;
  padding:5px;
  border:1px solid #ccc;
  border-radius:4px;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  width:30%;
}
<div class="wrap">

  <div class="inputQ">
    <div class="InputQuest">Text Middle</div>
    <div><input id="amnttext" class="textbox"></input></div>
  </div>

  <div class="inputQL">
    <div class="InputQuest">Text Left</div>
    <div><input id="loandtext" class="textbox"></input></div>
  </div>

  <div class="inputQR">
    <div class="InputQuest">Text Right</div>
    <div><input id="emidtext" class="textbox"></input></div>
  </div>

</div>

Upvotes: 2

Related Questions