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.

<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

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.