This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes HTML, CSS and JavaScript and the fly likes Combining css margin and table width in percentages Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Combining css margin and table width in percentages" Watch "Combining css margin and table width in percentages" New topic
Author

Combining css margin and table width in percentages

Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

Seems impossible..

Is there anyway I can get it to "do what I mean"???

I want a blue bar from left to right edge, then a grey bar that is center indented... basically, just bring it in on both edges a bit... What's happening is that the grey bar is taking up 100% of the screen width, not its container's width (its container being a div with a margin). So I get the horizontal scroll bar, and besides the scroll bar, it looks like I only have a left margin.

I am trying to use as much CSS as possible. I'm trying to avoid using the center tag.
Mani Ram
Ranch Hand

Joined: Mar 11, 2002
Posts: 1140
I'm not sure whether I have understood your question properly.
But, if you don't want to grey bar to span the entire screen, try removing the width attribute in the second table and try.


Mani
Quaerendo Invenietis
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You found one of the flaws with this. The table will table on the width of the page and will ignore the fact there is a margin, try using a smaller percentage. If you want in indent on the left then you can align the table to the right and give a percentage that way.
Sucks....
Eric
Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

This is as close as I can get to what I want...
The problem is the <center> tag.. it's deprecated, but there is no direct replacement that 'works' for doing tables. As Eric mentions, it's also a bit buggish that table widths are not relative to their containers when dealing with CSS.

As an example of how it *should*(?) work, a table width set to 600 px can contain another table that has a width of 100%. This interior table will not 'blow up' the page. It is limited by its container. I would have expected CSS and tables to get along better.

The problem with my 'best solution' is that the amount of whitespace on left and right is resizing along with the table. I wanted an absolute margin of 10px. Oh well. IT's also slightly buggy with IE6 on XP. When you drag the browser window wider and narrower, a horizontal scroll bar flickers on and off. As it happens the scrollbar is always pretty much 'unmoveable' as it is the width of the window. If you stop dragging with the scrollbar visible, you get a useless scrollbar. sheesh.

Mani:
Removing the % from the second table results in a grey bar that is as long as the word FOO. I could make the div itself have the background color, but then what happens when my table contains enough data to cause a horizontal scrollbar? (I don't want that). So I am trying to limit the table to 100% of it's allowed width, as specified by the containing div. But the browser isn't honouring this container's margins (or rather, it is.. but not in the way I want it to.)
Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

FYI: My original source works as I *think* it should in Mozilla Firebird 0.7

So it's nice that someone else thinks that way too.
Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

awesomes:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Basically, if I switch on compliance mode, IE 6 behaves 'properly' with regard to tables widths in percentages of their **parent** container.

IE always behaved correctly when the parent container was another table cell with some percentage or fixed width. But not with a DIV element.

By simply placing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
at the very top of my document, I get the expected and correct width calculations out of IE 6


For my next assignment, I'll be asking Microsoft to make this the default behaviour. Lemme just dig out Bill's phone number....
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Ask him for some money too while you are at it.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Combining css margin and table width in percentages