WIDTH:AUTO and centering problem

4 replies
  • WEB DESIGN
  • |
Hey guys

I'm playing around with this site of mine:

adam-sites-for-clients
dot
info/testing

I'm using all percentages and the "auto" thingie in my widths.

Look at the bottom middle div, "main_blocks"

For some reason I can't seem to center it and set the width to auto.

The "td" divs inside it also I tried to center them using margin-left:auto margin-right:auto

I'm prob'ly missing something small here.

Argh! :confused:


Any ideas?

Thanks for da help!
#centering #problem #widthauto
  • Profile picture of the author clarest
    You can try:
    1. Inserting the relevant class selector within <ul> (meaning <ul class="...") instead of putting it in each of the <li>.

    2. Build a table (as in <table>...), add a class selector with "margin:0 auto".

    Hope this helps.
    Signature

    "There are no new fundamentals. Be suspicious of someone who says 'I've got a new fundamental.' That's like someone inviting you to tour a factory where they are manufacturing antiques." ~ Jim Rohn on fads

    {{ DiscussionBoard.errors[5655152].message }}
  • Profile picture of the author adamgoldman47
    - clarest

    Which <ul> u mean?
    I'm talkign about the <div class="bottom_container">
    {{ DiscussionBoard.errors[5655243].message }}
  • Profile picture of the author SteveJohnson
    Forget about using a table. That's so 1990s.

    The 'bottom_container' is floated - there is no centering possible or even desired.

    Restructure the 'td' containers to contain everything that's associated with them. Set the 'bottom_container' to text-align: center. On the 'td's, remove the float, set the display to inline.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[5655769].message }}
    • Profile picture of the author adamgoldman47
      "Restructure the 'td' containers to contain everything that's associated with them"

      Steve,
      do you mean removing the <div class="inner_main_blocks"> ?

      The td div:

      <div class="td">
      <div class="inner_main_blocks">
      <a title="הגדרות החנות" href="#"><img alt="" src="index_files/main_blocks_config.gif"></a>
      </div>
      <a href="#">הגדרות החנות</a>
      </div>


      How do you suggest doing this? I have two borders to make there.

      Also, do you have any idea WHY the bottom container MUST be floated?
      If I try to remove the floating thing the whole site goes to hell.
      {{ DiscussionBoard.errors[5655844].message }}

Trending Topics