Weird div border problems when floating

Question

Could I please get a explanation of why this code produces the result it does? And a way to fix it/work around it, if possible.

I dont want div 'z' and 'q' to go over 'the blue div border' on the right.

Or

I would like div 'x' to be consitant with 'z' and 'q' and also go over the blue right border as well.

Please view result

<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'>
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div>
    <div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div>
    </div>
     <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div>

Answer 1

The red-border is actually inside the blue border in your image - but I assume you want to increase the margin on the z and q containers...

I've taken the liberty of enclosing the attributes in double-quotes and correcting the style rules that were re-declared (margin and margin-bottom) - but apologies for the line-formatting - I couldn't seem to get it to all stay inside the code block on this forum until I took out the line breaks:

<div style="margin: 5px;width: 653px;border: blue 1px solid;float: left;"><div style="margin: 5px;width: 100%;border: red 1px solid;">z</div><div style="overflow: hidden;margin: 5px;width: 100%;border: red 0px solid;"><div style="margin: 0px;width: 300px;border: red 1px solid;float: left;">y</div><div style="margin: 0px;width: 300px;border: red 1px solid;float: right;">x</div></div><div style="margin: 5px;width: 100%;border: red 1px solid;">q</div>

Answer 2

Throught what browser did you produce the screenshot? If it's IE, there's a problem with the box model that causes the border width to be ignored when calculating 100% width.

Either you create an invisible container to size the inner div's or size your inner div to container.width -2.

Also, try removing the width: 100%; from the div's.