/    Sign up×
Community /Pin to ProfileBookmark

Overlapping <div>’s

Copy linkTweet thisAlerts:
Jul 22.2005

First, let me say that I have solved this problem by floating one div to the left within the container and the other to the right so that they no longer overlap. I am posting this question to get a better understanding of css, hoping that someone can tell me [B]why[/B] the <div> with the green border is overlapping the one with the blue border, and why it is only overlapping halfway. If half, why not all?

The code isn’t all than long, but you can see it [URL=http://www.sonora-sw.com/test/overlap.htm]here[/URL] and the css files [URL=http://www.sonora-sw.com/test/alignment.css]here[/URL] and [URL=http://www.sonora-sw.com/test/pixelfont.css]here[/URL].

I am really curious about this behavior. Thanks in advance.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@andyshepJul 22.2005 — the borders do not overlap. its all to do with color theory.

your eyes may think they are overlapping because the colors 'bleed' into each other.

but they are not acually overlapping.

andy
Copy linkTweet thisAlerts:
@NogDogJul 22.2005 — the borders do not overlap. its all to do with color theory.

your eyes may think they are overlapping because the colors 'bleed' into each other.

but they are not acually overlapping.

andy[/QUOTE]
If you look at it in FF, they are on the same horizontal plane and do overlap. If you look at them in IE they are on separate horizontal planes and don't overlap.
Copy linkTweet thisAlerts:
@JayhawkauthorJul 22.2005 — I should have tested in IE, you're right, they are in different horizontal strata.

In Firefox the green-bordered div half covers the button and kills the link for the right half of the button. Mouseover the button and you will see the hand cursor on the left half of the button, outside the green border, and no hand inside the green border because that div is on top of the link. Definitely an overlap.

I know of nothing that causes divs to overlap, and I know of nothing that prevents the overlap from being 100% instead of just halfway. If it is going to overlap at all, why does it only go halfway? But... why does it overlap at all?
×

Success!

Help @Jayhawk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...