Mon, 2014-03-10 18:22
Many times I've been about to post here and then, just as I was about to post, figured out the issue, but this time I'm absolutely stumped. 
I've got these two pages on two different sites:
On each page there is a div with blue background containing a headline (Page 1: "Why Use This Test?", Page 2: "Perchè fare questo test?") and four bullet points. On Page 1 this div is on the right; on Page 2 the div is currently showing up at the bottom.
The issue is that I'm trying to get the div to show up on the right on Page 2 as well, but although I believe I'm using the exact same code, the div is rendering differently. On Page 1 the div is not as wide and hence it floats, whereas on Page 2 the div is wider and hence there is not room for it to float. But why is there a difference? Both divs have this code:
.testright { width: 320px; float: left; border: 3px solid #084D77; background: #E7F4Ff; border-radius: 10px; padding: 20px; margin-left: 10px; margin-top: 20px; }
And I don't see anything to override it. I've stared at this for like an hour now, and I can't figure it out. Please help?
Mon, 2014-03-10 18:47
#1
I have been playing around
I have been playing around with your testright, this is the oficial code you are using:
.testright { width: 320px; float: left; border: 3px solid #084D77; background: none repeat scroll 0% 0% #E7F4FF; border-radius: 10px; padding: 20px; margin-left: 10px; margin-top: 20px; }
I changed it to this:
.testright { width: 320px; float: left; border: 3px solid #084D77; background: none repeat scroll 0% 0% #E7F4FF; border-radius: 10px; padding: 20px; margin-right: -50px; margin-top: -1650px; position: relative; margin-left: 600px; }
It seemed to work for me, let me know if it fixed your problem 
Mon, 2014-03-10 19:01
#2
Thank you, helldog2004, for
Thank you, helldog2004, for offering a workaround but I'm really keen to understand WHY these two divs are being rendered differently with respect to width. It's so frustrating when things are supposed to work and don't! 
So I'm really hoping for some help figuring that out!
Mon, 2014-03-10 19:15
#3
I am not sure but it might be
I am not sure but it might be because in your first page you are using celebritytypes.css and it seems your testright is taking over the following command:
-moz-box-sizing: border-box;
In the page it is not working the way you want it to you are not using the celebritytypes.css so the last called command is not being active on this box.
And it seems I was right:
Forget the above mentioned work around and do the following:
Find on line 154 code:
.testright { width: 320px; float: left; border: 3px solid #084D77; background: none repeat scroll 0% 0% #E7F4FF; border-radius: 10px; padding: 20px; margin-left: 10px; margin-top: ; }
and add the following line:
-moz-box-sizing: border-box;
This will solve the problem.
So conclusion:
In your working page you are using celebritytypes.css while you where not using it on the not working page.
In this celebritytypes.css it was using -moz-box-sizing: border-box; on your border.
So add this very same command on your testright in the not working page and it will work fine
Mon, 2014-03-10 19:51
#4
helldog2004 wrote: So
So conclusion:
In your working page you are using celebritytypes.css while you where not using it on the not working page.
In this celebritytypes.css it was using -moz-box-sizing: border-box; on your border.
So add this very same command on your testright in the not working page and it will work fine
THANK YOU SO MUCH! 
You're absolutely right that that was the cause of the difference. Thanks for clearing up my confusion!
I have some reading on -moz-box-sizing: border-box; to do now... Embarrassingly I don't remember why I'm using that! :
(I'm continually dealing with issues coming back to bite me due to my site still relying on CSS that I wrote three years ago when I was first learning about CSS and didn't know what I was doing.)
Thank you again, you made my evening!
Mon, 2014-03-10 20:06
#5
You are more then welcome,
You are more then welcome, happy it is solved
Mon, 2014-03-10 20:19
#6
Robustness over work-arounds
A single pixel, where everything is so tightly defined can cause the drop down. I'd definitely opt for a more robust solution to the page. I would not go the box-sizing route, as it is an opportunity for error due to inconsistencies that you introduce (as you've seen).
Suggestions:
.testtexttopfive { margin: 0 60px; } .testcontenttopfive { background: none repeat scroll 0 0 #FFFFFF; border-radius: 14px; margin: 0 15px 5px 128px; min-width: 828px; overflow: hidden; padding: 10px 5px 32px; } .testleft { float: left; margin-right: 2em; width: 420px; } .testright { background: none repeat scroll 0 0 #E7F4FF; border: 3px solid #084D77; border-radius: 10px; margin-top: 20px; overflow: hidden; padding: 20px; }
Delete this: <div class="clearfloat"></div>.
cheers,
gary
Mon, 2014-03-10 23:27
#7
Thank you so much, Gary, I
Thank you so much, Gary, I will incorporate your advice ASAP!