SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with my CSS design & Floating elements

    Hi All,

    I've put together this CSS design and am nearly there apart from 2 problems.

    Now it works great in IE, but not FF but I can't see at all what the problem is in firefox. All seems OK to me. So could someone please advise.

    http://www.sloughtownfc.net/problems.html

    Also i'd like to add two elements to this design as shown here (element a and b), but can't quite figure out how to do it



    Would someone be able to help?

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your wrapper is 975px wide.

    #main is 750px wide (including padding)
    #search is 230px wide (including padding)

    750 + 230 = 980px

    That's 5px to big to fit so the float drops underneath.

    Reduce #main to 745px width and it will fit.

    IE was working because you have a partial doctype which causes it to be in quirks mode and use the broken box model . Use a full doctype (with uri.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Regarding your second question then perhaps the 3 elements on the right would be better off in their own single floated column (one column holds all 3 elements). Alternatively you should be able to float the elements into position as required.

    Without seeing a mock up of what you really want its hard to say what's the best approach as colored boxes rarely represent the real world.


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
  •