CODEWITHSUNDEEP
csshtmlresponsive-design
K.Z
K.Z

Reputation: 5075

put child div at the bottom of parent div

i have parent div with 2 child divs inside. Both child div contain text, only 1 bigger than other. now consider responsive web design. I want 2nd child div at the bottom of parent div... i need to ensure both child div float left so that they can behave properly in responsive web 

<div class="TitleHeader_Bar_L2">
  <div class="WebPage_Title_L2">
    <h4>Avaliable FeeZones</h4>
  </div>
  <div class="Title_Message_L2">
    Select FeeZones to Add in Given Scheme
  </div>

CSS

.TitleHeader_Bar_L2{
 overflow:auto;
 width:100%;
 background-color:red;
}

.WebPage_Title_L2{
 float:left;
 color:#F8F8FF;
 font-size:1.7em;
 padding:.5%;
 margin-left:.7%;
 }

.Title_Message_L2{
float:left;
color:#F8F8FF;
font-size:1em;
font-style:italic;
margin-left:.7%; 
}

Upvotes: 1

Views: 826

Answers (1)

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this:

Fiddle Here

.TitleHeader_Bar_L2{
 overflow:auto;
 width:100%;
 background-color:red;
 position:relative;
}

.WebPage_Title_L2{
  float:left;
  color:#F8F8FF;
  font-size:1.7em;
  padding:.5%;
  margin-left:.7%;
}

.Title_Message_L2{

  color:#F8F8FF;
  font-size:1em;
  font-style:italic;

  position:absolute;
  bottom:0
}

Good Luck...:)

Upvotes: 1

Related Questions