0
I have an activity to do about CSS that involves Inherit and Float attribute. The statement indicates the following:
Build the following layout containing three divs , in column format, the first containing the text "column 1" in white and black background , a second containing the text "column 2" in white and green background and the third part containing the text "column three" in white and grey, use a div as "parent", they will all have the same size that should be 150 pixels high 150 pixels wide: [example image attached]
Okay, we’re good until the "dad" part. When the 3 Divs of the beginning of the exercise were assigned, in CSS, with the Float element, they worked perfectly as indicated in the example. However, when you place these Ivs inside the div "father" and make them all inherit its its dimensions, Float no longer works.
HTML and CSS code:
#pai {
width: 150px;
height: 150px;
}
#um {
color: white;
background-color: black;
width: inherit;
height: inherit;
text-align: center;
float: left;
}
#dois {
color: white;
background-color: green;
width: inherit;
height: inherit;
text-align: center;
float: left;
}
#tres {
color: white;
background-color: grey;
width: inherit;
height: inherit;
text-align: center;
float: left;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="exercicio2.css">
<title>Exercício 2</title>
</head>
<body>
<div id = "pai">
<div id = "um">
Coluna 1
</div>
<div id = "dois">
Coluna 2
</div>
<div id = "tres">
Coluna 3
</div>
</div>
</body>
</html>I wanted to know what would be the solution to this within the limits given by the exercise?
Good morning, I think the statement could be clearer, but from what I understand that size applies only to div’s daughters. If the father div is not bigger the div’s daughters would have to be superimposed, which I don’t think makes much sense. I hope it helps
– imex
Really, the question is badly written. At the time of solving I thought it would make sense, since "use a div as "father", all will have the same size that should be 150 pixels high 150 pixels wide", but then putting this father div she would have no function other than being there. I changed the code, took the id of the parent div and put the same measurements on each of the Divs in css (which is what worked before). It’s definitely a mistake in that relationship even you said.
– user202017