Why doesnt the CSS height: auto; work!

I think there is a Bug with CSS.
That is the height: auto; is not working!
To be exact look here:

http://www.notefab.com/features.php

Note: this is a new site under work, so dont worry about links not working, etc.

As you can see in the 1st containing DIV of: item_holder
it has the height: auto;
in place. But as per the 1st example of such DIV with all the “Test Test Test” in it, as you can see the height is not Auto adjusting to contain all the content and instead the content is over flowing out of the DIV!

Is this a Bug with CSS or what does one need to do for height: auto; to work in such case?

FYI, we also tried adding:
overflow: auto;
and set min-height with height: auto;
and none of these works either!

Thanks for your deep thought about this puzzling matter.

Because your inner divs are set to position: absolute, they are taken out of the flow of the document. The containing div effectively doesn’t know they are there.

This is the wrong time to be using position: absolute. There are lots of options for a layout like this, including floats, display:table or the more modern option of display: flex.

There’s no problem with CSS here. Position: absolute is doing exactly what it’s supposed to do. You’re just using the wrong tool. :slight_smile:

4 Likes

zeropsi, we addressed this problem, via use of Position relative absolute, etc.

But now I notice another problem. and I think this is a CSS error, as I see many related posts online, but no good real answers to it. That is height: auto is not working to expand the containing to Auto fit the content in that container!

Please add this to the header of your site:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

Preventing visitors from zooming is not user-friendly and shouldn’t be necessary.

(See this post for more information.)

3 Likes

Agreed, I hate when I can’t zoom in on a webpage.

As @ralphm says, your problems stem from the inappropriate use of position:absolute.

If you change this:

 .item_lbl {
    font-family: "Trebuchet MS";
    font-size: 18px;
    left: 45px;
    position: absolute;
    top: 5px;
}

to this:

.item_lbl {
    font-family: "Trebuchet MS";
    font-size: 18px;
    padding-left: 45px;
    padding-top: 5px;
}

your content will fit.

(Note: I have not attempted to address any of the other issues with your code; this simply fixes the problem you are enquiring about.)

Yes, I agree too.
Being able to Zoom in is really a user friendly must specially given the fact that not everyone has the same eye sight and some people can only really see well by zooming in when looking at content via a Mobile phone of a Site.

Techno, I took your suggestion and made some other changes too, and now it works fine. That is page displays all OK. with the DIV content auto adjusting to display same on a PC or a Smart Phone, etc.

And FYI, and for FYI of others that have been commenting about the CSS of this Site not being so great, which I know to be the case. I am not a CSS expert and really do not have the time to become a CSS expert now. And not sure I want to ever, given how many other things I want to learn. I am a rather expert in LAMP and JavaScript, which needless to say is plenty of expertise to have. As few people are expert on whole LAMP Stack and then JS too. So this site of Notefab is to show this amazing new service I have developed (Founded) which is an ultimate Note taking services, to be really your 2nd brain. And develop the Site to the good enough extent so that we can present it to VCs to raise Capital. Once we have raised the 1st round, then I will hire a team of crack pot CSS designers, to upgrade the CSS part of the Site. Meanwhile I have to manage with my admittedly not so great CSS mastery to get the Site developed for display on normal screens. Unless one of you CSS experts wants to be Co-Founder and get share for your work to co-develop the Site. If yes, get on touch, Otherwise, keep this fact in mind in case of future questions I have about CSS aspects of this Site/Service being developed.

Not a problem. You can get a long way on quite basic CSS.

I do, however, suggest you look carefully at your HTML, which currently consists almost entirely of <div> and <span> tags. Using semantically correct tags - <p> for paragraphs, <h1> through to <h6> for heading, correct markup for lists - is not just a fad. It’s important - not least because search engines rely on correct page structure to help them make sense of the content. I’m assuming that matters to you, as I notice you have included the “keywords” meta tag (no longer in use by any major search engine).

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.