Jump to content
Sign in to follow this  
pretesh

box sizing border box question

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...