I think there is a Bug with CSS.
That is the height: auto; is not working!
To be exact look here:
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:
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
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.
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.)
Agreed, I hate when I can’t zoom in on a webpage.
As @ralphm says, your problems stem from the inappropriate use of
If you change this:
font-family: "Trebuchet MS";
font-family: "Trebuchet MS";
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.
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
<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).
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.