-1

As you can see from my code I am still learning so any constructive criticism unrelated to this problem regarding my code and its structure is not only welcomed as it is greatly appreciated.

I've added coloured borders to better understand the limits of each element.

At current the problem is that the image (blue border) ought to stay inside its parent meaning the header (pink border) since I've given the image a max width of 100%. But instead 100% seems to be a specific location outside all the elements.

Screenshot of the problem

HTML: 

<main id="main">
  <div id="main-wrapper">
    <header>
      <title>Tristerix Aphyllus</title>
      <h1 id="title">Tristerix Aphyllus</h1>
      <div id="img-div">
        <img
        id="image"
        src="https://f000.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=4_z15c789d4ee26751161fe0711_f11571cf7ab6ffd8a_d20200104_m185127_c000_v0001064_t0054"
        alt="A close up of several Tristerix Aphyllus on multiple cacti"
      />
     </div>
    <p id="image-atribution">
        <a
          href="https://www.inaturalist.org/photos/13632769"
          target="_blank">
          &copy; John D Reynolds
        </a>
      </p>
  </header>

CSS:

#main-wrapper {
  margin: 0% 30% 0% 30%;
  border: hsl(355, 80%, 45%) 30px solid;
}

Header {
  text-align: center;
  font-color: hsl(355, 80%, 45%);
  border: pink 30px solid;
}

#img-div {
  margin: 0% 0% 0% 0%;
}

#image {
  margin: 0% 0% 0% 0%;
  border: blue 40px solid;
  max-width: 100%;
}

#image-atribution {
  text-align: right;
  margin-top: 0;
  font-size: 0.6em;
  padding: 0px 10px 0px 0px;
}

(Sorry to the ones that initially opened the question with the code missing)

Deohgu
  • 55
  • 1
  • 8

3 Answers3

1

By default border and padding are not included in width calculations. In your example the content box of the image has the same width as the container, and the border width is added on top of that.

You can achieve the desired effects by adding box-sizing: border-box to the image.

You can find a detailed explanation in The box model, section "What is the CSS box model?"

Alexey Lebedev
  • 11,988
  • 4
  • 39
  • 47
1

That is happening because of the box sizing of the image. What I mean is, that the default box-sizing of the image is content-box, making the padding and border not part of the image width, so when you add border, it won't make part of the image width, as such, it will make your image overflow.

All you need yo do is add the following to your #image:

box-sizing: border-box;

And the padding and border make now part of the image total width. You can take a deeper read about this topic in the here.

Pedro Figueiredo
  • 2,304
  • 1
  • 11
  • 18
0

You've told your image that it's max width should be 100%, which is great, but it doesn't know the size of it's parent container. Relative size properties such as max-width must know what they are relative to, so try giving your img-div container a width dimension, for example:

#img-div {
  width: 400px;
  margin: 0% 0% 0% 0%;
}

Good luck with the rest of the FCC project!

Marco
  • 511
  • 6
  • 16