Why is there vertical space between 2 DIVs

HTML & CSS
1

Hello,

I am having bizarre CSS problems! Enough to send a person back to Tables :slight_smile:

You can see a new page under development here:

So problems I am having are:

1- There is this huge vertical space between 2 DIVs where there should be none
I am talking between:

<div class="top_txt">

&

<div class="bg_w_foto">

2- I have the 1st item in <div class="bg_w_foto"> as having margin-top: 150px
but it has NO margin spacing at all

What are the problems?

Thanks

2

Your problems lie in the definition of .head_holder. Specifically, you define a margin_bottom of 50px.

3

How is that the problem?
So that DIV has margin_bottom of 50px and margin-top: 150px;
What is wrong with that?

And what is the solution?

4

well, perhaps i’m misunderstanding, because your original post didnt escape the HTML. Which elements are you having problems with specifically?

5

Is explained in the question!

"
1- There is this huge vertical space between 2 DIVs at the top where there should be none
I am talking between:
class=“top_txt”
&
class=“bg_w_foto”

2- I have the 1st item in
class=“bg_w_foto”
as having margin-top: 150px
but it has NO margin from top spacing at all

"

6

There’s nothing “there”. So no, it’s not explained in the question. It’s blank. Escape your HTML with backticks. <sothatitdoesntgeteaten>

7

I remove the HTML bracket tags. Sitepoint used to handle that. But I guess not anymore.
Anyway, they are removed and you can see the specified classes/DIVs now
Also the problem is obvious to see here:

8

The problem is not ‘obvious’.
There are no less than 3 layers deep worth of “DIV” tags in that page.

Here. I’ll use Paint.

1920×1261 557 KB

Pick a number.

9

What does that mean?
Again what I am looking for is to remove the white space between the top div that is one with class=“top_txt”
and the DIV below it that is one with class=“bg_w_foto”?
Specifically from your screen shot the blank white space with number 3 Should not be there.

Thanks,

10

That space is defined by the margin-top that you have written into the first head_holder element.

400×540 29.7 KB

11

Ha! That is weird!
1st, yes removing the margin-top: 150px; from that inner DIV does remove that blank space.
But that DIV is inside the DIV with class=“bg_w_foto” and that one has margin-top set to zero px and I thought that a DIV inside a DIV will have its margin push against that DIV and that the parent DIV does not have its margins affected by its chlid DIVs!!!

12

This may be of interest. (Pad the parent 1px, and margin-top it -1, and it should behave like you think it should.)

13

This is one more proof that CSS is crazy badly done. Because the margins of a child DIV should NOT affect the margins of the parent DIV. That is logical on any level of design.

Ok, so how do we then give the 1st DIV inside the parent DIV a margin-top of 150 px?
To be exact how do we have DIV containing line:
“Anoox Chat: Chat World Wide for Free”
to have margin-top of 150 px from the start of its parent DIV that is the one with class=“bg_w_foto”

14

Well, as i said, you can give the parent a 1-px padding, and then offset it with a margin-top,
Or you can add an empty element with a 1px height and no margin before the first <div> you want to margin.

15

Well I gave it a padding-top to get the result that we should have gotten from margin-top
Again this is one more example of CSS being full of crap :frowning:
I tell you I will be real happy when we can hire a CSS expert so I do not have to mess with it again :slight_smile:

16

Well, yeah. That makes sense, since what you’re trying to do is pad the inside of the parent :stuck_out_tongue_winking_eye:

2 Likes
17

There are some un-intuitive parts of css that could have been done better and margin-collapse is one of them but at the end of the day it’s pretty simple (not rocket science) if you have the time to learn the basics. You can’t speak a language just by learning miscellaneous words! You have to know how to construct them into meaningful sentences and obey the rules of the language; it’s much the same with CSS.:slight_smile:

I wrote this article on margin-collapse about 10 years ago and although its been updated by others since it’s still 99% my original words and explains the perils and pitfalls.

4 Likes
18

When I know it will not cause any problems, my first step is to put the parent in a new block formatting context. It became a habit with me long ago.

As was mentioned in the link that m_hutley provided in post#12.

Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

3 Likes
19

Paul Thanks for that intel.

But I stand with the fact that it makes NO Sense and in fact is totally wrong for the margin-top of a child DIV to affect the margin-top of the parent DIV.
But too busy with the chat release to argue this now :slight_smile:

1 Like
20

Perhaps I have had way too much exposure to SciFi for my own good, but one way I think of margins is they’re like a “force field” that needs “matter” to push against. i.e. the two “force fields” do not have physical boundaries. Certain CSS can give “boundaries” where there would otherwise not be and the margin will work as expected.

4 Likes