floated div box refuses to go to the top of the page, it stays ~118px down |
floated div box refuses to go to the top of the page, it stays ~118px down |
JRBobDobbs |
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. |
Frederiek |
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.
|
JRBobDobbs |
Feb 25 2010, 03:38 AM
Post
#3
|
Member Group: Members Posts: 41 Joined: 2-November 09 Member No.: 10,212 |
|
pandy |
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&output=html&h=200&slotname=5341543762&w=200&lmt=1267083291&flash=10.0.45&url=http%3A%2F%2Fmetalarchives.transcix.com%2Flinks%2Fbusiness.html&dt=1267117420351&correlator=1267117420352&frm=0&ga_vid=77065746.1267117421&ga_sid=1267117421&ga_hid=768969713&ga_fc=0&u_tz=60&u_his=2&u_java=1&u_h=1080&u_w=1920&u_ah=1052&u_aw=1920&u_cd=32&u_nplug=18&u_nmime=88&biw=1338&bih=916&fu=0&ifi=1&dtd=176&xpc=zt1pAZaN9e&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> |
Darin McGrew |
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;"> toCODE <div style="padding-top:115px;"> the div moves to the top. |
pandy |
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.
|
pandy |
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.
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. |
pandy |
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.
|
pandy |
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> |
Darin McGrew |
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. |
pandy |
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!
|
JRBobDobbs |
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.
It looks related to collapsing margins. When I change CODE <div style="margin-top:115px;"> toCODE <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! |
Darin McGrew |
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. |
pandy |
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 |
JRBobDobbs |
Feb 25 2010, 10:09 PM
Post
#15
|
Member Group: Members Posts: 41 Joined: 2-November 09 Member No.: 10,212 |
|
Lo-Fi Version | Time is now: 20th April 2024 - 06:58 AM |