Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question CSS centered layout help

    I'm currently working to redesign this site.

    I want a fairly simple design with a header, main content and footer that fill 100% of the browser width so that I can specify the background, with the actual content of these centered in a fixed width div.

    I have done this by creating wrapper divs in which I place my content divs like this:

    Code:
    #contentContainer { position:relative; width:965px; margin:auto; border-top:10px #8C1C1C solid; border-bottom:10px #8C1C1C solid; }
    #mainContent { float:left; width:665px; padding-right:10px; }
    #courses {  float:right; width:280px; margin-left:10px; margin-top:20px; background-image:url('../img/nowBooking.gif'); background-repeat:no-repeat; }
    So far I have it looking pretty much as I want: example. However - ironically - my css does what I want in ie6 (which I have to support) but not in ff3. In ie the borders for the contentContainer div appear as I want, at the top and bottom respectively of the main content. However, in ff both the top and bottom borders appear at the top of the main content.

    The css positioning of my divs may well be to blame: I have tried playing around with them but to no avail. If anyone could give me a hand clearing up this problem, or showing me a better way to achieve the look I'm after, it would be much appreciated. I have taken inspiration from sites like stopdesign andideafoundry/ (although hopefully just that, I don't want to be accused of theft).

    Thanks,

    Ed

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You need to clear your floats.
    Last edited by abduraooft; 06-16-2009 at 03:12 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you

    You are a genius. Much appreciated.


  •  

    Posting Permissions

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