Page 1 of 1

How do I get a div to act like a table?

Posted: Thu Sep 27, 2007 3:22 pm
by figaro11
Whenever I get a div the [display:table] rule it makes the div acted like a table in the sense that it's width doesn't extend to the end of the right part of the document, but instead it shrinks to the the content within it and expands only when needed. This doesn't work in IE, as you may already know. So my question is, how do I get a div to have this behavior for both great browsers and IE?

So, is there a way, or are tables the only element that can act like this across all browsers?

Posted: Thu Sep 27, 2007 3:29 pm
by matthijs
IE is what it is. A buggy old browser. There is a javascript file out there which corrects some of the bugs (called ie7.js or something if I remember).

A question though: why do you need that table behavior? And second, if you really need it, maybe you could just use a table :)

Posted: Thu Sep 27, 2007 4:18 pm
by JAB Creations
We spent an hour discussing why you shouldn't use tables unless you're using tabular data. The divisible elements weren't intended to act like tables, you have to figure out how to manipulate divisible elements using CSS as they were intended.

Open IE4 and start using the CSS I we've also discussed for some time. It's more then capable of handling CSS level 1 for the layouts you're interested in without having any bugs that will effect the display of newer/better browsers.

If you can't grasp the basics your understanding of the advanced aspects of CSS and (X)HTML will be marred.

Posted: Thu Sep 27, 2007 5:12 pm
by shylor
Yes, I just started to learn CSS and I agree with above. If your information needs to be in a table so be it. Just do not program your whole page in tables. CSS is a very powerful language, but CSS will mess up a table if the page is not displayed right for some reason.

Posted: Fri Sep 28, 2007 3:50 pm
by figaro11
I never said that I will use nothing but tables, nor did I say that I would make every element on my web page act like a table... I don't see where you guys get that in my post.

But anyway...s. Lol

I'm making a tooltip. I'd like my tooltip's width to be small an only expand when my content width the tooltip expands. Does that make sense? After all, this is the behavior of standard windows tooltips; you don't see tooltips width, in windows, expanding from the left side of the screen to the right, do you?

So, the only element that I've come across that has this behavior, is the table, or a div that has a table display rule.

Do you understand my problem now?

Posted: Fri Sep 28, 2007 4:13 pm
by nickvd
figaro11 wrote:I never said that I will use nothing but tables, nor did I say that I would make every element on my web page act like a table... I don't see where you guys get that in my post.

But anyway...s. Lol

I'm making a tooltip. I'd like my tooltip's width to be small an only expand when my content width the tooltip expands. Does that make sense? After all, this is the behavior of standard windows tooltips; you don't see tooltips width, in windows, expanding from the left side of the screen to the right, do you?

So, the only element that I've come across that has this behavior, is the table, or a div that has a table display rule.

Do you understand my problem now?
width: auto;

?

Posted: Fri Sep 28, 2007 4:39 pm
by figaro11
nickvd wrote:
figaro11 wrote:I never said that I will use nothing but tables, nor did I say that I would make every element on my web page act like a table... I don't see where you guys get that in my post.

But anyway...s. Lol

I'm making a tooltip. I'd like my tooltip's width to be small an only expand when my content width the tooltip expands. Does that make sense? After all, this is the behavior of standard windows tooltips; you don't see tooltips width, in windows, expanding from the left side of the screen to the right, do you?

So, the only element that I've come across that has this behavior, is the table, or a div that has a table display rule.

Do you understand my problem now?
width: auto;

?
This:

Code: Select all

<style>
#tooltip {
border: 1px solid #777777;
width: auto;
}
</style>
<div id="tooltip">Hello, what's up?</div>
Here. Doesn't seem to solve the problem, unfortunately.

Am I doing it right?

Posted: Fri Sep 28, 2007 5:08 pm
by Zoxive

Code: Select all

<style>
#tooltip {
border: 1px solid #777777;
display:inline;
}
</style>
<div id="tooltip">Hello, what's up?</div> 
Not sure if thats what you want or not.

Posted: Fri Sep 28, 2007 7:18 pm
by figaro11
Zoxive wrote:

Code: Select all

<style>
#tooltip {
border: 1px solid #777777;
display:inline;
}
</style>
<div id="tooltip">Hello, what's up?</div> 
Not sure if thats what you want or not.
No, sorry. Inline elements don't act much like a table element would. Inline elements can't have set dimensions from what I can see.

Any other ideas?

Posted: Sat Sep 29, 2007 1:26 am
by matthijs
Not sure I understand your problem. the tooltip should wrap around the content and not behave like a div, stretching all the way.

So the alternative is setting the tooltip to inline, as Zoxive suggested. (you could also use an inline element and style that. An em or span for example)

But now you say you want to give it set dimensions. But if you are going to set dimensions, you can just use a div and set it's width in px, em or %.

Did you also look at the existing tooltips out there and how they do the styling?

Posted: Sat Sep 29, 2007 1:59 am
by figaro11
matthijs wrote:Not sure I understand your problem. the tooltip should wrap around the content and not behave like a div, stretching all the way.

So the alternative is setting the tooltip to inline, as Zoxive suggested. (you could also use an inline element and style that. An em or span for example)

But now you say you want to give it set dimensions. But if you are going to set dimensions, you can just use a div and set it's width in px, em or %.

Did you also look at the existing tooltips out there and how they do the styling?
The problem are two things:

Code: Select all

<style>
#tooltip {
border: 1px solid #777777;
display:inline;
}
</style>
<div id="tooltip">
Hello, what's up?<br/>
Huh?
</div>
If you try out . And the second problem is that I can't set dimensions.

But the best thing I'll do is learn from example. Like you said, I should have looked how others do this before I posted this. :-\