8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Need a little help centering a CSS Div

by Brandon Tanner
7 replies
  • WEB DESIGN
    • |
Hey guys,

I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times).

I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off.

Here is the page...

www.wordflood.com/Test/Scrolling_Header.html

And here are the CSS includes...

www.wordflood.com/Test/style.css
www.wordflood.com/Test/IE6_style.css

This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something.

Any ideas?
#centering #css #div
  • Profile picture of the author icun
    Try this:

    #header_optin {
    position:relative;
    padding-top:60px;
    width: 1261px;
    text-align: center;
    }
    Untested but something like that should do it. It isn't adjusting when you change resolution or whatever because it is set to position: absolute;
    Signature
    Instant Social Presence: Facebook Graphics without Photoshop
    {{ DiscussionBoard.errors[2915051].message }}
  • Profile picture of the author wernerm
    <div style="margin: 0 auto; width: 800px;">Content</div>

    This will produce a centered container, if your resolution is wider than 800px ;-)
    {{ DiscussionBoard.errors[2915064].message }}
  • Profile picture of the author phpbbxpert
    the $header_optin width property should be
    width:100%;

    You may also have to add text-align: center; to the parent container to satisfy IE (IE is dumb that way)

    Then add text-align: left; to the children to reset it back.


    As a side note, you should not need that much hacking for that little bit of code.
    Checkout CSSPlay for some examples.
    Here is a good one, have a look at the source code
    http://www.cssplay.co.uk/layouts/bodyfix.html
    {{ DiscussionBoard.errors[2915108].message }}
    • Profile picture of the author Brandon Tanner
      Thanks for the suggestions guys, but unfortunately none of them are doing the trick.

      @ icun & wernerm - I tried both of your suggestions, but when I did the opt-in forms disappeared entirely.

      @ phpbbxpert - I adjusted the width to 100% and played around with the 'text-align' properties of both the parent and child, but still could not get it right.

      Must be another part of the code that's screwing everything up. Anways, I'll check out the CSSPlay examples - hopefully I can piece something together before I swear off CSS for good.
      Signature

      {{ DiscussionBoard.errors[2915422].message }}
  • Profile picture of the author phpbbxpert
    hmm, it fixed it in FireFox for me.
    What browser are you testing this in?
    {{ DiscussionBoard.errors[2915780].message }}
    • Profile picture of the author Brandon Tanner
      Originally Posted by phpbbxpert View Post

      hmm, it fixed it in FireFox for me.
      What browser are you testing this in?
      I tested it in FF & IE. Now I'm trying something completely different (less CSS and more "old school" HTML), and it's starting to look a lot better...

      www.wordflood.com/Test2/Scrolling_Header.html

      Only issue now is that it might not look great in IE6, but I'm not gonna break my back over that !$@%# browser.

      Thanks anyways for your help!
      Signature

      {{ DiscussionBoard.errors[2915998].message }}
      • Profile picture of the author Brandon Tanner
        Hey guys...

        I've been playing around with it some more and have it working pretty well now, for the most part...

        www.wordflood.com/Test5/Scrolling_Header.html

        The only inconsistency now is with IE7... which adds an extra (unnecessary) scrollbar next to the header.

        Edit: Nevermind, got it figured out now. ( - :
        Signature

        {{ DiscussionBoard.errors[2918941].message }}

Trending Topics