CODEWITHSUNDEEP
htmlcss
ryryan
ryryan

Reputation: 3928

100% height div cutting off div inside

I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.

However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.

Here's the link to see it: removed

As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.

PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.

Thanks in advance

Upvotes: 2

Views: 15075

Answers (3)

huzzah
huzzah

Reputation: 1805

From main-style.css line 5:

overflow:hidden

and main-style.css line 127:

overflow-y:auto

are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.

Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.

Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content (also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).

 <div class="centerText messageWrapper">
        <div class="messgaeHeader">
            <div style="float:left; width:50%">
                From: 12345678<br />
            </div>
            <div style="float:right; width:50%; text-align:right">
                Date: 123456789<br />
            </div>

        </div>
        1234567890
 </div>

Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.

Upvotes: 0

downrightamazed
downrightamazed

Reputation: 21

Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.

ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.

ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.

Upvotes: 2

BlakeGru
BlakeGru

Reputation: 702

  1. Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
  2. I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.

Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.

Upvotes: 5

Related Questions