First problem: I have a nested div (the white box within the grey box, I also called the id whitebox). Like in the example I’d like to have a very small gap left and right, so I gave a margin-left and a margin-right of 10px, the left worked, but the right wouldn’t make any difference, doesn’t matter how I played with negative pixels and directions. Instead it overlapped on the right handside as soon as I gave the property margin-left a value.
Second problem: I don’t know how to make my image and its description to stay in my whitebox. I also nested the image and its description within the whitebox-div. Since I nested into the whitebox I thought that the whitebox would be the parent-element of the div/figure of the image. So I thought I could just tell the figure-box to make 100% of height and width and eventually justify their positions with margins and paddings and item-aligns
.
Well, this doesn’t work. I centered the image and what I took to account from that is that its actually centered when you take the grey box as the default (let’s call it grandpa-element) as the “100% width”.
I hope you can follow my thinkings, it may be much easier than I make it out to be…
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main id="main">
<div id="captionfield">
<header id="title">Dr. Norman Borlaug</header>
<p>The man who saved a billion lives</p>
<div id ="whiteblock">
<figure id="img-div">
<img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg">
<figcaption id="img-caption"> Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
</figure>
</div>
</div>
</main>
</body>
</html>
To keep your images responsives, don’t get too big, and inside their boxes you should use:
#whiteblock {
background-color:white;
/* you don't need the rest of the code for contain the image */
}
/* */
#image {
max-width: 100%;
height: auto;
margin: 0 auto;
/* margin auto to left and right it will center the image horizontally */
/* you could use max-height: max-height of the image in px too */
}
If you want center something inside a flexbox container you can use:
and inside a grid container is very similar, you could use this shorthands:
place-content: center;
place-items: center;
You have a typo here:
#whiteblock p{
vertical-align: center;
It is not close and it seems you do not need it now.
One more thing you should read about margin collapsing, or even watch Kevin Powell video about it, for example. Childs margins top and bottom affect to their parents too. You can open the dev tools and look the margin of a parent and a children when you use vertical margins on each of them.
I’m not talking about the image. I’m talking about the little gap between the grey and the whitebox on the left and the right side.
I tried to set it to margin: 0 auto but nothing happens. I tried it with margin-left but that was exactly my problem: Only one works at the same time. margin-left will make a little gap on the left and then on the right it will overflow. I tried it with width and height, but then everything is totally destroyed.
Trust me save your CSS code some where else and then erased all.
Block elements will take 100% of the width page, padding will give you space (padding between then) and max-width in the image will do it. But you might like use some margin too or max-width in some boxes as I mentioned before.
Check the syntax of your selectors too, and start over. It is faster and you will learn a lot.
Start with your boxes for example and then use that code for the image.
Oh I see so I can see all my elements bordered for a better overview for the margins and paddings. That’s good.
If I understand it right, the width is always referring to the 100% of the page, not of the div, that’s why it’s overlapping if I have nestd div’s? but what is then the default of a nested div´? Can I tell the div to be 100%?
I think you should take a break, erase your CSS code and try it again later or even tomorrow. But really, try those things, you can comment in and out properties with Ctrl + Ç in Windows, for example.
Just give yourself a rest, it is important. An experience developer told me this he can solve a big problem in 9h in one day!!
But MORE IMPORTANT he could solve the same problem in ONLY 1h and half dedicating to it 3 different days in a row!!
Did you have erased all you CSS rules and properties and try what I wrote? Padding should help you with that, or even max-width: 90%; to the inner box, for example.
Try comment out everything at least, and select again both boxes and try to fix it after give a max-width: 100% to your image, but start over instead because the image wasn’t have the correct selector.
So my idea was:
1- erased or comment out all your CSS
2- add outline to everything
2- select you image correctly and add that max-width: 100%; (copy and paste the id from HTML even to be sure)
3- select your outer box and give it color and padding left and right
4- (testing different) select your inner box and give it a max-width: 90%; , for example, after comment out padding in the outer box.
