I am trying to move an app over from using tables for layout to using DIV's. I have written up an example of my problem. I have a menu at the top of the screen that I need centered and each menu item should expand a % of the length of it's parent DIV. Right now, I have specified my parent DIV to hold the menu at 500px and it is centered on the screen. Fine and dandy. Now, when I place individual DIV elements, each containing a menu item, inside that DIV, A) they aren't centered, and B) I have specified the width of each one at 125px but they are all only as wide as the text. Below is the example code that produces the same wrong result. Any help would be appreciated.
I know your pain Gregg I have some pages that I would love to move to CSS from using tables for layout, but I can't muster the courage to do it, yet! [ December 28, 2005: Message edited by: Sonny Gill ]
whooops this was meant for you other post... [ December 29, 2005: Message edited by: Eric Pascarello ]
Joined: Nov 08, 2001
Here is your problems you are facing. I did not actually run this in a browser, but I think I see the problems by your description.
By using inline, you are changing the properties of a block element. It will no longer hold its width so you need to dump that line. Instead what you need to do is add float:left to the menu items which will line up the divs beside each other. When IE is not in complaince mode, it still keeps the block proerties even though it is not supposed too!
Next on your list is the box model of an element. Take a look at this page for a good overview of it. http://www.w3.org/TR/REC-CSS2/box.html . Basically the border adds width so you need to subtract the wonderful border thickness from each size to make the divs fit on one line.
With these two changes along with the complaince mode added, you should be the first steps in getting it to work. Hopefully I am correct in my two assumptions above, hopefully I helped you stop banging your head a little