Whats the sense of determine height and width of DIV if two ID Divs exists with different dimensions


#1

whats the sense of determine height and width of DIV if two ID Divs exists with different dimensions

div {
    height: 100px;
    width: 100px;
    border-radius: 5px;
    border: 2px solid black;
}

#inner {
    height: 75px;
    width: 75px;
    background-color: #547980;
    /*Add your CSS here!*/
    
}

#outer {
    height: 1500px;
    width: 150px;
    background-color: #45ADA8;
    position: absolute;
    margin-left: 100px;
}

#2

div refers to all divs, where as #inner and #outer are referring to specific divs. This means that everything with id="inner" or id="outer" will have the dimensions you assigned those IDs, but every other div tag will be as you described in div {....}.

Hope that helps!


#3

There is another interesting point is that specific div passes over general div . (If I have completely understood !) .


#4

That's correct. A div that has a class or an id that has been assigned certain properties such as width will have the properties that it is given, rather than the ones that are given to all divs. For example:

div {
background-color: red;
}

#bluediv {
background-color: blue;
}

<div>
    This div will be red.
</div>

<div id="bluediv">
    This div will be blue.
</div>

#5

@slibre2, yes you can read in absolute detail about it here, maybe a interesting read for you as well @jibblyj, if you haven't already


#6

yes. i know but i mean this example. div height and width are useless


#7

Why are they useless?


#8

couse if we have only 2 divs. 1 inner and 2 outer
it works fine without heigh and width from div. and nothing changes when I delete it. Site looks the same with and without 100px from div, beaouse inner and outer has their own values (height and width) assigned so div values are useless in this example. It could be usefull if we have different div without his own id/class


#9

agreed, this:

div {
    border-radius: 5px;
    border: 2px solid black;
}

#inner {
    height: 75px;
    width: 75px;
    background-color: #547980;
    /*Add your CSS here!*/
    
}

#outer {
    height: 1500px;
    width: 150px;
    background-color: #45ADA8;
    position: absolute;
    margin-left: 100px;
}

would be better. You are right, it is pointless to define a width and height in div since they are being overwritten by the id's