Need a little help centering a CSS Div

by 7 replies
8
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?
#website design #centering #css #div
  • 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;
  • <div style="margin: 0 auto; width: 800px;">Content</div>

    This will produce a centered container, if your resolution is wider than 800px ;-)
  • 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
    • [1] reply
    • 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.
  • hmm, it fixed it in FireFox for me.
    What browser are you testing this in?
    • [1] reply
    • 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!
      • [1] reply
Join the discussion

Next Topics on Trending Feed