SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    page layout issue

    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.


    Paul

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

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

    Code:
    #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:


    Code:
                    <span class="TwitterTime"></span> </div>
                    <!--</p>-->
                </div>
    That closing p tag cannot be there and cannot contain block elements.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    project-info has the same problems as mentioned above.

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

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    project-info has the same problems as mentioned above.

    Code:
    #project-info {
      background:red;/* just for testing*/
      overflow: hidden;/* contain floats*/
    }
    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. #8
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •