wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes DIV and CSS Help Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "DIV and CSS Help" Watch "DIV and CSS Help" New topic
Author

DIV and CSS Help

Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

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.



Thanks.


GenRocket - Experts at Building Test Data
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

One other note, It seems to work fine in IE but not in firefox.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Ok, looks like one of the major problems I am having is Firefox 1.5 has started ignoring my WIDTH style for some reason.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Adding the following made IE start behaving like Firefox.



God I hate this crap! Still working on it.
Sonny Gill
Ranch Hand

Joined: Feb 02, 2002
Posts: 1211

God I hate this crap! Still working on it.


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 ]

The future is here. It's just not evenly distributed yet. - William Gibson
Consultant @ Xebia. Sonny Gill Tweets
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
whooops this was meant for you other post...
[ December 29, 2005: Message edited by: Eric Pascarello ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Gregg,

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



Eric
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Thanks Eric. I'll give this a shot as soon as I have a chance and let you know.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: DIV and CSS Help
 
Similar Threads
Another table border question
multiple lines in button
converting html to pdf
Absolute Position in IE
Need help editing some css if possible (SOLVED)