Tribute Page - Build a Tribute Page

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">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="">
    <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>


/* file: styles.css */
#captionfield{text-align: center;
background: lightgrey;
padding-bottom: 10px;
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
height: 100%;
z-index: 0;}
#title{font-style: bold; font-Size: 50px;}
#whiteblock {
width: 100%;
z-index: 1;
height: 50%;
margin-left: 10px;
margin-right: 10px;
#whiteblock p{
  vertical-align: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    item-align: center;
    justify-content: center;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

1 Like

Hi @Maracujabier

Great job so far!!

To keep your images responsives, don’t get too big, and inside their boxes you should use:

#whiteblock {
/* 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:

justify-content: center;  [ main axis centering]
align-items: center; [cross axis centering]

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.

Some helpful videos I think:

You can do that with margins?

The most INFURIATING thing about CSS and how to deal with it!
00:51 - What are collapsing margins?

I hope that helps, keep the good work!!

Hi @Maracujabier

My bad, my selector was wrong, I meant to select the image.
You can check object-fit property too, it can be handy sometimes.

Please let us know if you have solved marking solution and not deleting your post, it might help other people.

Very useful free courses here:

Wes Bos Courses | check the free ones ;D

[Kevin Powell Courses | check the free ones ;D] (Courses)

You can start with this one: Conquering Responsive Layouts. I think is perfect for you at this point.

No rush just and your own pace,. Happy coding!!

I still don’t know how to make the gaps left and right like in the example… I need some properties for the whitebox but I don’t know how…

1 Like

Are you trying to make the element centered? Or are you trying to use margins to center your image?

Hi again @Maracujabier

Remember that you can use padding property as well or even margin-left and -right.

Make some tests.

Happy coding!

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.

1 Like

Hi again @Maracujabier

After fix your code and erase all margins you could use padding and give to your body this rules too.

body {
  margin: 0;
padding: 0;

It will reset the browser styles for those properties.

Just try what I have posted.

Also after you clean up your code you could give you white box a max-width too, say about 90%. But it depends what you want at the end.

Happy coding!

I tried everything with max-width, it will still overlap and what has the body to do with my gaps?

#whiteblock {
max-width: 90%;
margin: 0 auto;

It looks liek this with this code… centered and 90%… still overlapping

1 Like

Hi @Maracujabier

Please, read all I have posted.

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.

Just try it! Happy coding!

I read everything but I’m not smarter than before… still don’t know why it overlaps…

1 Like

Hi @Maracujabier

Don’t be so hard with yourself. Just give you time, we all have been there.

Please do what I have told you, it is working perfectly. Just some typos. Start simple. Give outlines to all your code:

* { outline: 1px solid pink; }

and erase the rest of the rules (save it some where else). Please try it.

I have corrected my first post (the image selector).

I actually don’t know what you mean. Should I delete my code and make everything from the beginning? What does outline mean?

1 Like

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%?

1 Like

Hi @Maracujabier

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!!

So give yourself time. Trust me! :grin:

No, I CAN’T use margin-left and right to make the gaps. It only works one side. That was and still is exactly my issue.

1 Like

Hi again @Maracujabier

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.

Test all that and let us know how it was.

Happy coding!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.