SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    0 Post(s)
    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.

    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?


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    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.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    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.


Posting Permissions

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