Jump to content

Search the Community

Showing results for tags 'border box'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. When 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; }
×
×
  • Create New...