The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> floated div box refuses to go to the top of the page, it stays ~118px down
JRBobDobbs
post Feb 25 2010, 02:49 AM
Post #1


Member
***

Group: Members
Posts: 41
Joined: 2-November 09
Member No.: 10,212
Hello. Here is the situation:

http://m etalarchives.tr anscix.com/links /business.html

Just eliminate the spaces and that URL will take you to the page in question. You can view the source code from there, or here is the section in question:

<body>

<div style="float:right; height:210px; width:210px;">
<script type="text/javascript"><!--
google_ad_client = "pub-1058951718750524";
/* TMA200x200 */
google_ad_slot = "5341543762";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<img src="http://metalarchives.transcix.com/images/logo.png" align="left" width="687px" height="120px" style="padding:0px 0px 0px 0px; position:absolute; top:0px; left:0px;">
<div style="margin-top:115px;">
<span class="menu"><a id="regularlink" href="http://metalarchives.transcix.com">Home</a> | <a id="regularlink" href="http://metalarchives.transcix.com/links.html">Links index</a> | <a id="regularlink" href="http://metalarchives.transcix.com/otherresources.html">Other resources</a> | <a id="regularlink" href="http://metalarchives.transcix.com/info.html">About the site</a></span>
</div>

<p>
<br>
<span class="bigbold">Business:</span>
<p>

As you can see I have a div box floated to the right of the screen, but for some reason it remains about 118px from the top. Perhaps that has something to do with the logo image to the left that is 120px high, or perhaps it has something to do with the margin of the menu below the logo (Home | Links index | Other resources | About the site) which has a top margin of 115px.

To me it seems that it should work fine just the way it is. I have tried absolutely everything, and some stuff does work except then it puts everything else out of place. One solution I noticed is that if I put a <br> or <p> between the logo and the menu like so:

<img src="http://metalarchives.transcix.com/images/logo.png" align="left" width="687px" height="120px" style="padding:0px 0px 0px 0px; position:absolute; top:0px; left:0px;">
<div style="margin-top:115px;">
<br>
<span class="menu"><a id="regularlink" href="http://metalarchives.transcix.com">Home</a> | <a id="regularlink" href="http://metalarchives.transcix.com/links.html">Links index</a> | <a id="regularlink" href="http://metalarchives.transcix.com/otherresources.html">Other resources</a> | <a id="regularlink" href="http://metalarchives.transcix.com/info.html">About the site</a></span>
</div>

then this way the div at the right does go all the way to the top of the page. However, the entire reason why I gave the menu a top margin of 115px, position absolute, and top:0px, is so that the distance between it and the logo above it would be thoroughly constant, as opposed to varying slightly depending on the browser. If I start adding a <br> or <p> tag into that distance then that defeats the whole purpose, as different browsers display those tags differently.

I know it's a small thing, but the details are very important to me (as with any professional website, I assume). And I assume there is an easy way to do what I want to do.

Any ideas?

Thank you very much in advance for any assistance.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 25 2010, 03:06 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
The quick solution would be to set a negative margin-top to the right floated div.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JRBobDobbs
post Feb 25 2010, 03:38 AM
Post #3


Member
***

Group: Members
Posts: 41
Joined: 2-November 09
Member No.: 10,212
QUOTE(Frederiek @ Feb 25 2010, 03:06 AM) *

The quick solution would be to set a negative margin-top to the right floated div.

That sounds very promising, I didn't know such a thing existed. I'll look into it tomorrow when I wake up, thanks Frederiek.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2010, 12:15 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Maybe safer to position the ad absolute too, as you already use AP. The box isn't at the same distance from the top in all browsers.

Haven't figured out why it's so low down yet, but it's something in your external style sheet for sure.

Google writes odd HTML BTW. INS?

HTML
<ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 200px; position: relative; visibility: visible; width: 200px;">
<ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 200px; position: relative; visibility: visible; width: 200px;">
<iframe allowtransparency="true" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-1058951718750524&amp;output=html&amp;h=200&amp;slotname=5341543762&amp;w=200&amp;lmt=1267083291&amp;flash=10.0.45&amp;url=http%3A%2F%2Fmetalarchives.transcix.com%2Flinks%2Fbusiness.html&amp;dt=1267117420351&amp;correlator=1267117420352&amp;frm=0&amp;ga_vid=77065746.1267117421&amp;ga_sid=1267117421&amp;ga_hid=768969713&amp;ga_fc=0&amp;u_tz=60&amp;u_his=2&amp;u_java=1&amp;u_h=1080&amp;u_w=1920&amp;u_ah=1052&amp;u_aw=1920&amp;u_cd=32&amp;u_nplug=18&amp;u_nmime=88&amp;biw=1338&amp;bih=916&amp;fu=0&amp;ifi=1&amp;dtd=176&amp;xpc=zt1pAZaN9e&amp;p=http%3A//metalarchives.transcix.com" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" width="200" frameborder="0" height="200" scrolling="no">
</iframe>
</ins>
</ins>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 25 2010, 12:27 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
It looks related to collapsing margins. When I change
CODE
<div style="margin-top:115px;">
to
CODE
<div style="padding-top:115px;">
the div moves to the top.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2010, 12:33 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Scratch that. I must have looked in IE by mistake. It's NOT the external style sheet.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2010, 12:47 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Darn! You beat me to it. tongue.gif

But how can the margins of two adjecent floats collaps? They don't touch. I can see how it happens when one of the boxes isn't floated and thus stretches behind the float, but not when both are floated. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2010, 12:52 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Hmm. A border doesn't stop it from happening. Could it be that the whole context, so to speak, is moved down by the margin? The image is AP so it doesn't count.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2010, 12:56 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Must be. Behold this.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--
#right { width: 200px; height: 200px; background: red; float: right; border: 1px solid }
#left { width: 200px; height: 200px; background: yellow; margin-top: 300px; border: 1px solid }
-->
</style>
</head>


<body>

<div id="right"></div>
<div id="left"></div>

</body>
</html>



Now change the HTML like so.

HTML
<div>blah</div>

<div id="right"></div>
<div id="left"></div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 25 2010, 01:13 PM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
It looks like the margin of the menu div is adjacent to the margin of the body element, so the body element effectively ends up with a 115px margin. The floating div starts at the top of the body element, so it ends up 115px from the top of the page.

What gave me the clue was simply viewing different elements in Chrome. I noticed that the body element started below the top banner, and then started working out why.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2010, 01:24 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You are right. A border or padding on BODY stops it. Bingo!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JRBobDobbs
post Feb 25 2010, 07:19 PM
Post #12


Member
***

Group: Members
Posts: 41
Joined: 2-November 09
Member No.: 10,212
Ah, negative margins do not work because on Internet Explorer the div is at the top in the first place so negative margins make it go up off the screen.

QUOTE(Darin McGrew @ Feb 25 2010, 12:27 PM) *

It looks related to collapsing margins. When I change
CODE
<div style="margin-top:115px;">
to
CODE
<div style="padding-top:115px;">
the div moves to the top.


I'm really not clear on everything you and Pandy have been discussing, but this suggestion of yours clears everything up for me, I have just changed the margins to padding. Thanks a lot!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 25 2010, 07:42 PM
Post #13


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
There is more info about collapsing margins here:
http://css-discuss.incutio.com/?page=CollapsingMargin
http://www.andybudd.com/archives/2003/11/n...rgin_for_error/

Think of it this way: If two paragraphs are adjacent, and they both have margin of 1em specified, then you want only 1em between them. You don't want the margins to be added together, which would yield a 2em margin.

This kind of collapsing margin is fairly intuitive. The confusion comes because CSS collapses all adjacent margins, not just the margins between one element and the element that follows it. You can have adjacent margins with an element and the parent element that contains it, which is what happened here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2010, 08:13 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
That browsers have picked this up a bit at the time adds to the confusion.

BTW if you later find that padding dosn't suit your needs, because of a background maybe, a 1px top padding on BODY does the trick as well. It separates the margins, so they don't collapse.

"In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."
http://www.w3.org/TR/CSS2/box.html#x26
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JRBobDobbs
post Feb 25 2010, 10:09 PM
Post #15


Member
***

Group: Members
Posts: 41
Joined: 2-November 09
Member No.: 10,212
I think I understand.

QUOTE(pandy @ Feb 25 2010, 08:13 PM) *

BTW if you later find that padding dosn't suit your needs, because of a background maybe, a 1px top padding on BODY does the trick as well. It separates the margins, so they don't collapse.

Good to know, thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 12:46 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC