Usually you would never float empty elements that just carry decoration as things will always move around. I;m sure I already gave you this example but you should do it like this.
I used margin:auto.
Which made it center, but the text is on the center/right side, and text-align:left;
Doesn’t help, and which class should I give a width?
And wouldn’t width mess up with other browsers/other viewers?
What is that you want centered exactly as I think we are talking at cross purposes here?
If you want the whole element centered it will need a width and margin:auto.
If you just want the text centered then use text-align:center on the main parent.
#bar-mid{text-align:center}
And you already gave it margin?
The element is width auto and therefore stretches all the way across the page by default. It cannot be centered because in essence it is already centered. I gave it a margin left and right of 12px which was to mak room for the transparent corners as previously explained.
Block elements will only be centred when they have a width and their side margins are explicitly set to auto.
You’ve just gone and given 1000px width to all three elements which will upset things because the inner elements have margins and padding applied.!
If you have another inner block element inside those nested divs that you want centred then you would give that new element a width and use margin:auto.
Silly question, but could we see the ENTIRE markup for that menu? It seems like you’ve got a whole bunch of DIV and other pointless markup for what should just be a UL with a bunch of LI, with a class on the last one.
Of course it appears you are trying to make them all perfect width and use images to do border’s job too…
Pretty sure that if it was written properly, that triple-nest of DIV would be unnecessary. CSS is only as good as the markup it’s applied to, and I think you’ve REALLY over-thought your markup. There is likely NO reason for that entire section of wrapping div nonsense AND the menu inside it to be anything more than: