Menu
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
642
asked Mar 19 '26 09:03
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).
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
