3

For the given source code of webpage:

Here is the modified css:

img {
   float: left; /* existing line of code */
   width: calc(98%/3);
}
img#img1 {
  margin-right:10px;
} 
img#img2 {
  margin-right:10px;
}

But the test results are not successful.

After css code changes, Why is the right image still flushed against viewport? as shown below:

enter image description here

Note: CSS code changes recommended only

0

2 Answers 2

2

You need to subtract 20px to account for the 10px margins on each side of the second image:

img {
  float: left;
  width: calc((100% - 20px) / 3);
}

img {
  float: left;
  width: calc((100% - 20px) / 3);
}
img:nth-of-type(2) {
  margin: 0 10px;
}
body {
  margin: 0;
}
<img src="//placehold.it/200" />
<img src="//placehold.it/200" />
<img src="//placehold.it/200" />

6
  • If your solution is correct, then, the all the test results should be green on webpage(top-right) Nov 18, 2015 at 19:11
  • @overexchange Nope. I didn't change any HTML. i.stack.imgur.com/FCKzR.png I just posted the HTML above as an example! Nov 18, 2015 at 19:13
  • you wrote type rule(img{}), twice. So, am not clear with the answer Nov 18, 2015 at 19:15
  • @overexchange That doesn't mean that I changed the HTML. In your code above, you wrote it out three times. Did you try adding width: calc((100% - 20px) / 3) to the img elements? That's the only part that is really different from our examples. I can assure you that it works... Nov 18, 2015 at 19:18
  • No it does not work in my case here Nov 18, 2015 at 19:24
0

@Josh Crozier @overexchange The code provided by @Josh Crozier solve the problem, and could be made with #imgid too, and others way. for this part of the course both answers are good enough.

@overexchange after checking your code i can see there is no space between the () and /3 like this:

img {
  float: left;
  width: calc((100% - 20px)/3);
}

this is making the css3 fail the calculations, like on media queries the space is necessary ex: @media screen and (query){} -> work @media screen and(query){} -> doesn't work

edit: i mean doesn't work on every port, the awkward part is the professor make the same thing you did on the answer

so this would be a acceptable answer

img {
  float: left;
  width: calc((100% - 20px) / 3);
}
img:nth-of-type(2) {
  margin: 0 10px;
}
body {
  margin: 0;
}

sorry for answering so late i just come across this post now, but will leave it there for anyone struggling with this... i probably made a few English mistakes sorry about that too it's not my native language, good luck

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.