Page layout issue

HTML & CSS
1

Hi Guy’s

I would appreciate if someone could help. One of my pages is not displaying correctly and I would like to find out why. Basically the footer should be 100% like the rest of the pages and when I add a border around the #snapshot & #project-info div’s (main content area) the border does not wrap the expected content area. I assume its something to do with the layout?

Here it is:

Toner Digital – Web Design, Graphic Design and Logo Design, County Down, Northern Ireland » shalomhouse

Thanks for any assistance.:slight_smile:

Paul

2

I can’t quite see what the problem is. Looking in FireFox, everything looks as I’d expect it to. Could you elaborate a bit, or post a screen shot of what you expect to see?

3

Hi Ralph.m,

Basically if you look at the footer it sould be 100% width of the screen as opposed to just the content area. Not sure why it’s changed as the rest of the pages are fine.

My other prob was that when I put a red border around the two DIV’s outlined earlier, the border wasnt wrapping the correct content area. For example my DIV “snapshot” has a border called but the border is at the top - it should be around the two smaller images @ the bottom.

Thanks for your time Ralph.

4

Hm, yes, somehow the footer jumps inside the wrapper on that page. Perhaps try validating the page first to see if there’s anything obviously out of place. The code on that page has a very weird flow, and I can’t even see why the red border appears where it does.

5

Hi,

The problem with the snapshot is that you a) haven’t cleared the floats above and b) haven’t contained the floats within and c) used height:100% which can’t really be used at all and d) you have added borders to 100% wide element making it too big. :slight_smile:

(See the faq on 100% height and as to why it’s of no use to you other than when hacking ie6)


#snapshot {
    width:100%;
    padding-bottom:20px;
   /* border:1px solid red;*/
    clear:both;/* clear floats above*/
    overflow:hidden;/* contain floated children*/
}

What was the issue with the footer again? It looks at 100% to me. I set the background to red and it stretches all the way across. Or did I miss something.

You do have a typo here:


                <span class="TwitterTime"></span> </div>
             [B]   <!--</p>-->[/B]
            </div>

That closing p tag cannot be there and cannot contain block elements.

6

project-info has the same problems as mentioned above.


#project-info {
  background:red;/* just for testing*/
  overflow: hidden;/* contain floats*/
}
7

If you wanted a border around the elements then you’d need to reduce (or remove) the width. IE6 would need hasalyout though in order to clear the floated children (zoom:1.0 or apropriate pixel width).

8

Hi Paul O’B,

Great help - many thanks really appreciate it, as always very vauluable feedback. I did not realise the importance of “overflow” and “clear” floats.

I can see where I was going wrong, I have now amended all your suggestions.

P.s I fixed the footer error myself ealier.

Thanks again,

Paul T