Help - Search - Members - Calendar
Full Version: pixels vs percentage
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
MindyT
I'm trying to put space between the images in the servicesPics. It will do it if I use pixels but not if I do percentages. Why is that?
'
CODE

<?php
require_once('functions.php');
?>  
<!doctype html>
<html>
<head>
<meta charset="utf-8/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel = "stylesheet" href = "Bixler.css">
<style type="text/css">
    .cycle-slideshow {
        width:600px;
        margin-left:auto;
        margin-right:auto;
      }
    .servicesPics {
        float:left;
        
    }
    .servicesPics img {
        margin-left:180px;
        
    }
    #firstRow{
        margin-top:2%;
    }
    figcaption {
        text-align:center;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<?php echo headerInfo();?>
<div class="cycle-slideshow">
    <img src="assets/minivan1.jpg">
    <img src="assets/tractorSunset1.jpg">
    <img src="assets/happyFamily1.jpg">
    <img src="assets/newerHouse1.jpg">
    <img src="assets/officeBuilding1.jpg">
</div>
<div id="firstRow">
     <div class="servicesPics">
        <figure>
            <img src="assets/minivan1a.jpg">
                <figcaption>Auto Insurance </figcaption>
        </figure>
    </div>
     <div class="servicesPics">
        <figure>
            <img src="assets/newerHouse1a.jpg">
        </figure>        
    </div>
    <div class="servicesPics">
        <figure>
            <img src="assets/happyFamily1a.jpg">
        </figure>    
     </div>
</div>
<?php echo footerInfo();?>
</body>
</html>

pandy
So how does it not work? Does nothing at all happen? Do some images move to the next line? I'm going to assume the latter.

A percentage for margin is calculated relative the width of the containing block, not the width of the element it's used with.
https://www.w3.org/TR/CSS2/box.html#value-def-margin-width
In your case that means the width of div.servicesPics, not the width of respective image. That DIV is floated. Since floats shrink wrap if they don't have an explicit width, its width is decided by its content. It gets complicated when the width of the DIV depends on the width of the content at the same time as the width of the content depends on the width of the DIV, as is the case if you use a percentage for the margins....

In my experience this doesn't always look the same in all browsers. One browser may drop one image, another two. But that could be because of rounding errors. I *think* it works this way. The browser uses the original width of the float to calculate the margin. When it adds the margin to the images it doesn't recalculate the width of the DIV. There's no longer room for the images so they start to move to the next line.

If you prevent the images from dropping, for example by using white-space: nowrap in the rule for the DIV, the images won't drop. But the float still won't resize, so the images will stick out from it.

Take this.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title>Reciprocal values</title>

<style type="text/css">
#test { float: left; background: red }
</style>

</head>


<body>


<div id="test">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>


</body>
</html>



It looks like this.

Click to view attachment


Now add your margin in %.

CODE
#test img    { margin-left: 10% }


Click to view attachment


Oops!

Try to stop that with no-wrap.

CODE
#test    { float: left;
           background: red;
           white-space: nowrap }



Click to view attachment


The width of the float hasn't changed and its content sticks out. That could still work as long as the DIV doesn't have a background. But it's safer to avoid percent for this, in case you later want to add a background or border or maybe the rest of the layout could be affected in some way.
pandy
I made that sound like this was programming, that things "happen" in a certain order. I didn't mean to.

I'll try to express it better (this is still how I *think* it works, mind you). If the browser would go for the other option and expand the float to accommodate the images with their margins, then the margins would no longer be 10% of the width of the float, right? If this was programming it would then need to adjust the margins so they are 10% again, but then they don't fit in the box again, so the float needs to be expanded once more but then the margins aren't 10% any more and so on and so on. It would be stuck in an endless loop.

This is probably the only way it can work, given the circumstances.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.