Home > Back-end >  CSS: 1) how to make height of float element not affected by child element? 2) how to specify min-hei
CSS: 1) how to make height of float element not affected by child element? 2) how to specify min-hei

Time:09-18

So, I have been searching for the answer for a day, but I still do not get the answer. I am not very good at CSS.

The Case

I want to create 2 equal square (1:1 ratio) side-to-side (100% width) with a little bit of margin. Inside of the square, there are smaller square(s). The min-height of the big square should be the width of the big square.


What I have done

The big square

I have done the big square, and It look like this. Even though it looks square, it is not. The ratio is still not 1:1. What is the best approach to fix this?

The small square

I have tried, and this is the result. The quantity of the small square should not affect the height of its parent. What should I do to fix this?


The code

.html:

<head>

    <link href="style.css" rel="stylesheet">

</head>

<body>

    <big-box id="left-box" style="background: blue;">
        <small-box style="background: white">
            <div>test</div>
        </small-box>
    </big-box>

    <big-box id="right-box" style="background: green;"></big-box>

</body>

.css:

big-box {
    background: pink;
    padding: 0.5% 0.5% calc(48% - 4px) 0.5%;
    margin: 2px;
    float: left;
    width: calc(48% - 4px);
    color: white;
    position: relative;
}

small-box {
    padding: 6%;
    float: left;
    background: #f1f1f1;
    margin: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    position: relative;
}

big-box div {
    position: absolute;
}

CodePudding user response:

have you tried to use: aspect-ratio: 1 / 1; – the padding gives all the headache, as margin for the small box would not change the bounding box

.big-box {
aspect-ratio: 1 / 1;
background: pink;
color: white;
float: left;
margin: 2px;
position: relative;
width: calc(48% - 4px);
}

.small-box {
align-items: center;
aspect-ratio: 1 / 1;
background: #f1f1f1;
color: black;
display: flex;
float: left;
justify-content: center;
margin: 0.5% 0.5% calc(48% - 4px) 0.5%;
/* margin: 1%; */
padding: 6%;
position: relative;
}
  • Related