2

I'm learning to build a responsive website for myself. I'm having a problem with the box-sizing border-box on the top and bottom borders of one of my images. I have two columns of images of different heights, I want the edges to match up but I also want a few pixels of white space to separate each image.

My problem is when using box-sizing border-box on the top and bottom borders they stay outside of the edge of the image thus pushing the next image below down by a few pixels making it no longer match it's neighbour on the bottom edge.

I want to fix this issue before going ahead and adding borders on the other images. I'm new to CSS so perhaps there is something very obvious i've got wrong?

Any help to get the borders to stay on the inside edge of the images would be greatly appreciated!

I've attached a screen grab of what is happening. border-box problem

 #rightCol {
   width: 50%;
   height: auto;
   float: right;
   box-sizing: border-box;
   border-left: 2px solid white;
 }
 #rightCol img {
   width: 100%;
   height: 100%;
   display: block;
 }
 #leftCol {
   width: 50%;
   height: auto;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border-right: 2px solid white;
 }
 #leftCol img {
   width: 100%;
   height: 100%;
   display: block;
 }
 .innerBorder {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border-top: 4px solid white;
   border-bottom: 4px solid white;
 }
<div id="rightCol">
  <div>
    <img src="./images/pa.jpg" />
  </div>
  <div>
    <img src="./images/game.jpg" />
  </div>
  <div>
    <img src="./images/spine.jpg" />
  </div>
</div>


<div id="leftCol">
  <div>
    <img src="./images/truck.jpg" />
  </div>
  <div>
    <img class="innerBorder" src="./images/ccc.jpg" />
  </div>
  <div>
    <img src="./images/box.jpg" />
  </div>
</div>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
pretesh
  • 21
  • 1
  • 3
  • 1
    `box-sizing:border-box` doesn't change the position of anything. All it does is make it so that when you specify a size for an element, that size includes everything except the element's margins. Normally, when you set the size of an element, the size is only for the content and then the padding, borders and margins are added to that. – Scott Marcus Apr 05 '16 at 16:50
  • 1
    Thanks. I understand what border-box can do, that's why I thought it ideal for this web page design. It's working correctly on the left and right borders as can be seen by the 4px gap between the columns. What I can't figure out is why on the top and bottom borders of the image (black box of cards) aren't contained within the image size also. They are outside of it as can be seen by it pushing the image below it further down. It's bottom edge is no longer level with the image at the bottom of the right-hand column. How can I fix this so I can keep it within? – pretesh Apr 06 '16 at 08:43
  • 1
    Well, remember that with `box-sizing:border-box`, margins are still NOT included in the size you specify, so I would check to see if there are any margins applied. – Scott Marcus Apr 06 '16 at 12:55
  • 1
    I've double checked there are no margins. I thought I could use outline instead of border-box but unlike border I can't specify a particular side like top or bottom it surrounds the entire image. – pretesh Apr 06 '16 at 22:51

1 Answers1

0

I don't think your .innerBorder styles are needed. Try this:

#rightCol {
   float: left;
   box-sizing: border-box;
   border-left: 2px solid white;
 }
 #rightCol img {
   max-width: 100%;
   height: auto;

 }
 #leftCol {
   float: left;   
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border-right: 2px solid white;
 }
 #leftCol img {
   max-width: 100%;
   height: auto;

 } 


<div id="leftCol">
  <div>
    <img src="./images/truck.jpg" />
  </div>
  <div>
    <img src="./images/ccc.jpg" />
  </div>
  <div>
    <img src="./images/box.jpg" />
  </div>
</div>


<div id="rightCol">
  <div>
    <img src="./images/pa.jpg" />
  </div>
  <div>
    <img src="./images/game.jpg" />
  </div>
  <div>
    <img src="./images/spine.jpg" />
  </div>
</div>
firebuilder
  • 16
  • 1