CODEWITHSUNDEEP
htmlcss
Abdelouahed EL HARIRI
Abdelouahed EL HARIRI

Reputation: 305

A div element won't inherit height in % from its floated parent and inherit it from its parent parent

I have a problem with the folowing code

header {
Position : absolute;
Display: inline-block;
Width: 15%;
Height: 100%;
Left: 0;
Top: 0;
}

.headerchild {
Display: block;
Width: 100%;
Padding-bottom: 20%;
Float: left;
}

Headerchildchildeader {
Position : absolute;
Display: inline-block;
Width: 80%;
Height: 100%;
Left: 20%;
}

The problem is that my headerchildchild calculate the height from its parent parent header and not from its parent headerchild

Upvotes: 0

Views: 23

Answers (1)

Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5566

I think I got what you want.

All you have to do is add position property in headerchild child class, .i.e.,

 .headerchild {
   position: relative; //newly added property
   Display: block;
   Width: 100%;
   Padding-bottom: 20%;
   Float: left;
}

Upvotes: 1

Related Questions