7 replies [Last post]
intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 11 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

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. Puzzled

I've got these two pages on two different sites:

Page 1
Page 2

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?

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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 Smile

Check Maximum Webdesign for your online solutions

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 11 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Thank you, helldog2004, for

Thank you, helldog2004, for offering a workaround Smile 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! Angry So I'm really hoping for some help figuring that out!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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 Smile

Check Maximum Webdesign for your online solutions

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 11 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

helldog2004 wrote: So

helldog2004 wrote:

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 Smile

THANK YOU SO MUCH! Laughing out loud 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! :Cool (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! Smile

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

You are more then welcome,

You are more then welcome, happy it is solved Smile

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 49 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 11 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Thank you so much, Gary, I

Thank you so much, Gary, I will incorporate your advice ASAP! Smile