Why is DIV with height auto not auto expanding as its child DIVs grow!

[WorldNews]

Hello,

We have a super structure like this:

<div id="main_holder_left">
</div>

Problem is that as the length of the main_holder_right DIV is increased with content from user the parent DIV of page_holder_main is not increasing its height even though it has:
min-height: 650px;
height: auto;

and instead the content of DIV main_holder_right are overflowing the parent DIV!
What is the problem? How to fix this?

If you want the actual page, it is here:
https://www.anoox.com/paid/buy_adv_tzt.php

keep in mind it is not puble and is under dev, and to really see the problem you need to submit all Keywords and then click to go to Check out.

Thanks.

[coothead]

Hi there WorldNews,

Firefox says…

Hmm. We’re having trouble finding that site.

Chrome says…

This site can’t be reached.

coothead

[SamA74]

I see the page, but I don’t see the probelm described in the page.

[WorldNews]

Coot,

Our Site of Anoox.com has been live since 2004
SO i guess that few minutes you tried to reach the site there may have been an Internet connection problem with our hosting provider.
But you can reach it now.

[WorldNews]

Sam,

You will see the problem once you upload your Advertising and as you see the right panel will start showing your Ad details as you input them. But what happens as the right panel gets longer and longer with your Ad content rather than the Parent DIV increasing its length too, since it has height: auto;, it does not and the right panel starts running into it!

[Mittineague]

@coothead

This site can’t be reached.

500 Can't connect to www.anoox.com:443 (SSL connect attempt failed error:141A318A:SSL routines:tls_process_ske_dhe:dh key too small)

[coothead]

Hi there WorldNews,

it may well have been live since 2004 but
sadlyly, I’ve not been able reach it since…

7:36PM GMT, 27th July, 2019.

coothead

[PaulOB]

I’m not sure if this is what you are talking about but its an issue anyway and you haven’t contained the floating column,

Try adding this:

#page_holder_main:after{
    content:"";
    display:table;
    clear:both;
    width:100%;
}

Otherwise the right column goes under the background of the footer.

[WorldNews]

Paul,

That suggestion solved this problem if the DIV is not dynamically adjusted in its margin-top as they scroll down the page. But once the margin-top for that right DIV is auto adjusted as they scroll down the page, then it fails again. Go ahead and start loading an Ad and as you add more Keywords and start scrolling down then main DIV does not Auto adjust and right-DIV runs into the footer then!

Thanks again

[WorldNews]

Coot,

Are you serious about this Error message!
I have not gotten such a report from anyone else from around the World.
But we did update the SSL cert few weeks back, and I am then sure if this error report is correct it is related to that update. But cannot figure it what to do to fix it if this is the problem!
Thanks for any thoughts you have to fix this.

[coothead]

Hi there WorldNews,

yes, I am serious, and tested the link again immediately
after your last post with no success.

Then I tried again after typing this sentence and the page
finally did load.

coothead

[coothead]

Hi there WorldNews,

as this link loaded, I returned to another thread of yours…

How to give a Textarea padding?

Hello Coot, Again, sorry for delay in replying. This is what you get doing 20 peoples Job working at a non-profit Anyway, I have implemented your last suggestion above, and it is not working again as you can see here: https://www.anoox.com/my/share_test.php?i=136892 As you see the emoji icon holder rather than being on the right edge of the Textarea is not there at all anymore. Also with this code of yours the text area is getting vertical scroll bars as you type beyond 1 lin…

…thinking that I might now be able to look at your problem but…

the link still did not work.

Hmm. We’re having trouble finding that site.

coothead

[WorldNews]

Hi Coot,

So as per your Error report of our Site not loading: i just ran from Office Depot to Staples to Apple Store, to check our Site from their PCs, and in all of them Our Site loads just fine. I also asked more than Dozen people from around the World, and they all replied our Site loads just fine.
And I see you are saying it is loading fine for you too now. So I guess that must have been a problem with your browser, still it worries me. I think problem may have been due to your browser cache. I think.

[WorldNews]

Coot,

What do you mean by:
" the link **still did not work"??
Do you mean you are having loading that page of our site again as per your prior Error report?
Or you mean that the CSS suggestion you have to fix this problem is not working!

[John_Betong]

Try validating the URL using this trusted site because it fails for me

https://validator.w3.org/

[coothead]

@WorldNews

What do you mean by:
" the link **still did not work"??

it meant that as the link to your site in this thread now worked,
I thought that it would also work in your other thread, but it did
not initially, so I posted the result here.

I then went back and tried again and after a little while the page
eventually loaded and stayed up long enough for me to analyse
and resolve your problem.

coothead

[PaulOB]

@WorldNews

That suggestion solved this problem if the DIV is not dynamically adjusted in its margin-top as they scroll down the page.

Ah ok I didn’t notice that you were applying a script to this element and therein lies the crux of your problem. You are not using a margin-top but are dynamically adding a top position using position:relative.

Although position:relative appears to move the element it in facts only moves the element visually and not physically and all elements on the page behave as though the element had not moved at all. It is not meant for structural positioning but for more subtle overlapping effects.

You will either need to change your script to use margin-top or perhaps remove the script altogether and use position:sticky on that column for modern browsers only.

e.g.

#main_holder_right{
    background:red;
    top:0!important;/* !important over-rides inline style added by script*/
    position:-webkit-sticky;/* needed for ios*/
    position:sticky;
}

[WorldNews]

JB,

Tested our Site with multiple Site testing resources, such as listed below and they all indicate it is loading just fine. But I see that the validator.org site is reporting same Error message that only coot had. So have to look into this bizzare error that seems to be affecting 0.1% of connections. Thanks.

Monitor Website Uptime and Availability Worldwide: Site24x7 Tools

Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

GTmetrix
https://gtmetrix.com/

https://downforeveryoneorjustme.com/

[m_hutley]

@WorldNews

Problem is that as the length of the main_holder_right DIV is increased with content from user the parent DIV of page_holder_main is not increasing its height even though it has:
min-height: 650px;

Behaves exactly as it should for me. Making one of your images height 972 stretched main_holder_right to be 1222px, and the main page_holder to 1304.

[PaulOB]

@m_hutley

Making one of your images height 972

You need to scroll to see the page break. here’s a screenshot showing the overlap when the right image height is increased.

Once you scroll a script is altering the top position of the right column using relative positioning and therefore it no longer takes part in the flow of the page visually.

As I suggested above position:sticky would solve the problem or changing the script perhaps to use margin-top (although there may be issues associated with that depending on circumstance).