How to understand width work,

HTML & CSS
1

In the head I set the width, why in the head of the page, it does not respond?

<body>
    <header>
        <div class="container">
            <div class="header">
                <div class="header__inner">
                    <img src="/img/Без имени.png" alt="" class="img-1">
                    <img src="/img/gazprom-saratov.jpg" alt="" class="img-2">
                </div>
                <div class="header__page">
                    <p> С ДНЕМ РАБОТНИКОВ НЕФТЯНОЙ И ГАЗОВОЙ ПРОМЫШЛЕННОСТИ!</p>
                </div>
            </div>
        </div>
    </header>
</body>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.header{
    max-width: 1600px;
    position: relative;
}
.header__inner{
    /* max-width: 100%; */
     
     
}
.img-1{
   
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.img-2{
    position: absolute;
    background-color: red;
   
    top: 0;
    left: 680px;
    width: 250px;
    height: 149px;
    border-bottom: 2px solid rgb(165, 165, 243);
}
.header__page{
    background-color: rgb(87, 87, 255);
    


}
1 Like
2

These are not the same…

The second is

or

or even

1 Like
3

What specifically is happening (or not happening) which you were not expecting?

1 Like
4

As always, I don’t understand how this markup works, I set the width of the parent, but the child elements do not respond, I also set the height of the pictures, but nothing works, it’s not known how to understand it, everything seems to be easy and simple, but it’s not ))
For example

<div class="header__inner">
                    <img src="/img/Без имени.png" alt="" class="img-1">
                    <img src="/img/gazprom-saratov.jpg" alt="" class="img-2" >
                </div>

.header__inner{
text-align: center;  
height: 200px;

}

So he has to make a picture with a height of 200px, but it turns out he has an indent from the bottom, how does it work?

5

Then you need to take some time to learn the basics as mentioned in previous threads.

All your mistakes are beginner errors and you wouldn’t be making them if you took a more structured learning approach.

We can easily point out the errors as in your previous threads but that doesn’t seem to be helping you to learn.

I know it’s hard at first but it’s the same with any language. If you don’t have the right building blocks you can’t build the house. :slight_smile:

Header-inner is automatically the same width as it’s parent in this structure. It needs no width or max-width.

You don’t set any height or width for img-1 and for img-2 you set a height of 149px. How can they possibly be 200px high as you have done nothing to make them so.

You set the height of header-inner to 200px but that won’t change the height of the image.

You shouldn’t be absolutely placing img-2 either as that is not a maintainable structure. You should probably be using flexbox for this structure.

I suggest you throw all your code into a codepen so we can see what you are attempting and that will make it easier for someone to help.

6

Personally, this does not work for me, if I specified the width of the parent, then the child element does not react to this, I just do not understand why the image does not react to the parent if the dimensions are set

7

It doesn’t work for anyone because its not correct.

Images are replaced elements and have intrinsic width and height and will be the size they were designed at unless you explicitly control them with css. You don’t do anything to control them in your code.

As I mentioned before you absolutely placed your second image which means it no longer takes part in the flow of the document and will not respect its parent boundaries. This is basic css and something you would have learned in he first week of a structured course…

I can only guess at what you were trying to and have adjusted your codepen.

1 Like