Jump to content

box sizing border box question


pretesh

Recommended Posts

post-198486-0-28470900-1460371133_thumb.pngpost-198486-0-11923400-1460371117_thumb.jpgWhen using box-sizing border-box on images do I have to use specific dimensions (e.g width: 100px, height: 200px) for it to work properly?

 

I'm building a site with responsive images next to each other but separated by a border. It works fine on the left and right borders but the top and bottom borders are not contained within the image thus pushing other images next to it out of sync.

 

This issue is really frustrating as I have googled to find a solution but found nothing, not even someone with the same problem.

 

My image sizes are Width: 100% and height: auto. Is this not allowed for box-sizing border-box?

 

Can anyone provide a fix for this as I can't use outline or box shadow for what i want to do?

 

Here is my html and css, i've also uploaded screen grabs of my issue:

 

<div id="rightCol">

<img src="./images/pa.jpg"/>
<img src="./images/game.jpg"/>
<img src="./images/spine.jpg"/>
</div>
<div id="leftCol">
<img src="./images/truck.jpg"/>
<img src="./images/ccc.jpg"/>
<img src="./images/box.jpg"/>
</div>
#rightCol {
width: 50%;
height: auto;
float: right;
}
#rightCol img {
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-left:2px solid white;
border-bottom: 4px solid white;
display: block;
}
#leftCol {
width: 50%;
height: auto;
}
#leftCol img {
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right:2px solid white;
border-bottom: 4px solid white;
display: block;
}
Edited by pretesh
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...