I am trying to overlay a couple of links on an image. It works using position: relative but there now is a gap beneath the image which wasn’t there before I added the extra div.
IIRC using position: relative, the space the div would have taken up is still used (and empty). That seems to be what’s happening.
(How) can I remove the empty space? I’m probably being a numpty.
Here’s a (half-)working page
Ah - I didn’t explain that properly. It’s the white space between the two images (below the banner and above the “I am therefore I meet” image) I’m trying to eliminate (or at least some of it).
Ah. Then it’s this. You’re putting a 10px border above and below the logo…
If you change it to something like margin: 10px 0 0; the bottom border disappears.
Nah, sorry. Wrong element. .logo img is the get2thepoint at the top.
Hopefully the before and after images below explain…
Ohhhh… The space above the “I am therefore I meet”? If so, that’s caused by your 110% font-size on your main
With
Never use position:relative to move things around when you want the normal flow of the page to follow the element.
Use margins instead.
.lang{
position:relative;
top:0;
left:0;
margin-top:-2.5rem;
margin-left:6%;
display:table;
}
Thanks Paul. What does the display: table do? I don’t see any difference if I omit it.
The difference shows if you hover over the “lang” div in the inspector. Then you will see the difference:
The table display shrink wrap the div to its content while the default div expand to fill avaiable horizontal space. Here the remaining 94% on the right hand.
As @Erik_J explained it is a shrink-to fit algorithm just like the inline-block you were using so I assumed you wanted it as shrink to fit (which would seem sensible as you don’t want it layered over anything else by mistake).
Unlike inline-block the negative margin-top is applied correctly (I’m guessing that’s why you were tempted to use position:relative and moving it with a top value).
Ah, yes. I remember using display table to shrink-wrap an image a while back.
If I had a brain…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.