CODEWITHSUNDEEP
htmlcss
Elton Frederik
Elton Frederik

Reputation: 259

Chrome is displaying varied width

Ok I have 10 divs which should be all 75px wide with a 1px border making them 77px wide. I am trying to set the width of row1 to the minimum required to accomodate the 10 boxes.

My maths is as follows

Yet when set the width to 788px, the last box overflows. Upon further inspection I noticed using developer tools that the width of the boxes vary between 77px (3 times) and 78px (7 times).

Why are the boxes not all the same size, as this messes up my maths. I am using Chrome, the code works fine in IE.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
 <script type="text/javascript" src="js/control.js"></script>
</head>
<body>
<div class="board">
    <div class="row1">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>


</body>
</html>

CSS

.body { font: 12px "helvetica neue", helvetica;
}
.board {
    background: #EBEBE0;
    padding: 10px;
    width: 808px;
}
.row1 {
    background: #FFDCDC;
    height: 52px;
    padding: 10px;
    width: 788px;
}
.box {
    width: 75px;
    height: 50px;
    border: 1px solid #000;
    float: left;
    margin: 0 2px 2px 0;
}
div.box:last-child {
    margin-right: 0;
}

JSFiddle

Upvotes: 3

Views: 92

Answers (3)

Elton Frederik
Elton Frederik

Reputation: 259

Hey guys after struggling with this code, I resorted to uninstalling Chrome and reinstalling it. Now the problem is fixed.

I want to thank you all for your efforts.

Upvotes: 0

Lisa Shiphrah
Lisa Shiphrah

Reputation: 447

I couldn't reproduce the problem either...

I've copied and pasted your code and it seems well to me. Have you tried to create a blank document (.html) and paste the code you've put here to check if this problem also occurs?

Another question is: What is in the javascript file? Can't it be changing anything from your styles? Maybe something like $(div).css('margin', '10px') (just for an example).

Upvotes: 2

Happy
Happy

Reputation: 1855

This behaviour may occur because of spaces between the div.

Try this:

<div class="board">
    <div class="row1"><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
    --></div>
</div>

Upvotes: 0

Related Questions