Margin errors in Different Browsers

HTML & CSS
1

Hey all,

Recently I’ve come across a slight issue where my margins are off in different browsers. In Firefox (where it was coded, the css), there are no issues, however in other browsers such as Safari or Chrome, the margin is off by anything from 1-3px, but nothing too bad. And lastly, IE, well…that’s a whole different story…the margin is off by a code 100px, at least.

Now, I’m somewhat new in this domain of coding sites, so my method of setuping up divs, etc may be incorrect to begin with. Anyway, here is my problem;

Basically, I setup the body portion of my site in 2 sections, the left side (div id=“leftside”) and the right side (div id=“rightside”). I then proceeded to code the left and right margins…there were no real issues with that. The problems started when I needed to get the right side up beside the left side, so I used float and margin-top values.

Basically, what I did in order to get the right side up beside the leftside is this;


#rightside {
float: right;
margin-top: -1435px;
}

I don’t know if that is the correct way to do it, but it was the only way I was able to get the right side lined up right beside the left side. If I remove the negative margin-top value, the right side is to the right, but below the left side.

My code works fine in Firefox, as stated, but when I open it in virtually any other browser, the margin-top is off by anything ranging from 1px to 100px+

Is my error in the way I set it up? Or is there a way to get around the margin issues?

Thanks a ton,

Elementax

2

Having such a monstrous top margin can’t be right.

Do you have a link?

The float drop can have to do with erroneous width calculations. A width consists of margins + padding + borders + width.

There may also be some content overflowing that causes the drop.

3

Yes, that’s what I figured :stuck_out_tongue: Take a look here, maybe you’ll see something I didn’t

The site is still in dev, but you’ll see what I mean.

Elementax

4

Some pointers…

You can remove the top margin. Instead I’d use floats and apply width to both containers and position your right container relatively. You’d need to clear whatever container is below it (clear:both;).

For the containers, you could use something like:

#leftside {
width:642px;
margin-left: 18px;
float:left;
display:inline; /* needed for old versions of IE if you use a left margin and float it to the left */
}

#rightside {
margin: 0 15px 0 20px;
position: relative;
top:-70px;
float:left;
width:250px;
display:inline; /* needed for old versions of IE if you use a left margin and float it to the left */
}

I prefer using just one direction of floats and try to avoid mixing left and right floats. But you can do as you like, of course.

Also, the above is just a quick example, the widths may be totally incorrect.

5

Wow, thanks a ton, that fixed it up quite a bit, I’ll definitely remember those tips for future sites. It appears to be working in every browser. I’ll play around a bit with how I code my CSS for the future, as I’m sure there are better ways to get done what I want to.

Thanks again,

Elementax