Why doesnt the whole DIV content show

HTML & CSS
1

Hi,

I am working on a new page, here:

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

where the entire content of the main DIV, which is in class: gen_page_body
is not showing!
And I tried overflow: auto; for this DIV, and still a good part of the content from this DIV is not showing!
that is it does scroll to show some of the content from this DIV that is not initially visible, but it does NOT scroll to show the entire DIV content. And just to be sure I have marked the end of that DIV with “This is the END.”

What must be done to fix this?

Thanx,

2

Change your .gen_page_back class to this:

.gen_page_back {
    position: fixed;
    background: #F8F9F9;
    top: 75px;
    overflow: auto;
    bottom: 100px; //height of the footer
}
3

Yes, that suggestion works quite right.
Dont know what we did not take off the same!
Thanks :slight_smile:

4

Well, I would suggest that you have a rethink about
the whole project. :winky:

I assume that you want your page to be viewable on
mobile devices rather than like this…

Why do you not want a page that flows naturally
from the top left to the bottom right?

coothead

3 Likes
5

zeropsi, a follow up question.
If you look at the same page, but on a smaller window, you will see that the lines on each row, in front of the Eye icon are wrapping under the Eye icon rather than wrapping under same section.
How do we address this?
Also, even though we have given the DIV that contains these SPANs padding of 5px, once they wrap then padding is not going into effect!
How do we address this?

Thanks,

6

Coothead, currently our focus is to get the site launched on desktop, laptops, iPads, etc. and not focused on Mobile phones. We will later release a Mobile phone version and maybe even an App.
For the Mobile phone version we will use Responsive design based on:

@media screen and (max-width:320px) {
/* CSS for screens that are 320 pixels or less will be put in this section */
}

if you have other suggestions, we would love to hear them.

7

2 posts were merged into an existing topic: Why doesnt the CSS height: auto; work!

8

Instead of a separate mobile version, just keep the layout fluid in the first place instead of making rigid css rules and using absolute positioning everywhere. Things that will need to be undone and overcome when the time comes you decide to do all the work again for your mobile version.
Why not do it right, do it once?

As things stand the elements in the header start to clash at about 1024px width. The text in the main body part clashes if it exceeds the 50px container height, which it will on narrower screens. Both these problems are due to inappropriate use of absolute positioning.
This is why the layout should be fluid for all screens, not just the smallest ones.

Yes the viewport meta tag is a must, but don’t disable user scaling.

2 Likes
9

Check out the attachment which contains a
complete reworking of your header.

You may noticice that it is now javascript free
and mobile friendly. :winky:

WorldNews.zip (2.4 KB)

coothead

5 Likes
10

And ooh, look! It even works with keyboard navigation now!

4 Likes
11

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