CODEWITHSUNDEEP
htmlcss
Juancarlord
Juancarlord

Reputation: 116

make inner div inside not overlap outer div

I have the following image, but i need the blue part to be inside the white div. tried with overflow:hidden but doesn't work. how can i make it not to be visible and retain the border radius of the white div.

enter image description here

<div class="qrcode" style=" z-index: 1;display: block; margin: auto; text-align: center; height: 250px; width: 300px; border-radius: 4%; background-color: #ffffff;">
                <div class="brand" style=" background-color:rgb(0, 214, 255); height: 260px; width:50px;">

                </div>
            </div>

Upvotes: 0

Views: 75

Answers (3)

user18265126
user18265126

Reputation:

overflow:hidden is working you can see the below:

<div class="qrcode" style=" z-index: 1;display: block; margin: auto; text-align: center; height: 250px; width: 300px; border-radius: 4%; background-color: #F7F7F7; overflow:hidden;">
                <div class="brand" style=" background-color:rgb(0, 214, 255); height: 260px; width:50px;">

                </div>
            </div>

Upvotes: 1

4D_Liam
4D_Liam

Reputation: 71

You could try adding overflow-y: hidden to your qrcode class

Upvotes: 1

Damzaky
Damzaky

Reputation: 10826

overflow: hidden does work though:

body {
  background: black;
}
<div class="qrcode" style=" z-index: 1;display: block; margin: auto; text-align: center; height: 250px; width: 300px; border-radius: 4%; background-color: #ffffff;overflow:hidden">
  <div class="brand" style=" background-color:rgb(0, 214, 255); height: 260px; width:50px;">

  </div>
</div>

it's better if you set the child height smaller though in my opinion

Upvotes: 1

Related Questions