CODEWITHSUNDEEP
css
Jason
Jason

Reputation: 3

css max-width not working inside another div

See css/html below; Can someone help why the max-width in the inside div (class "b") will not work? I'm running this in chrome and it stays with the max-width of 600px and does not adjust to 400px. The outside div works and adjusts itself from 800 to 600 when adjusting the browser window but the inside div stays on 600px! any tips? I tried adding !important and other things but nothing helped.

Thanks!

.a{
margin: 0 auto;
background:yellow;
max-width:800px;
min-width:600px;
height:100px;

}
.b{
margin: 0 auto;
background:green;
max-width:600px;
min-width:400px;
height:50px;
}
<div class="a">
<div class="b">
</div>
</div>

Upvotes: 0

Views: 836

Answers (1)

user4082764
user4082764

Reputation:

The outside div is wrong. Because a max-width:600px; the browser stoped that max-width you must give equal or lower value from .b

.a{
    margin: 0 auto;
    background:yellow;
    max-width:800px;
    min-width:400px;
    height:100px;

}
.b{
    margin: 0px 50px 0px 50px;
    background:green;
    min-width:400px;
    height:50px;
}

working DEMO

Upvotes: 1

Related Questions