How do I get a div to act like a table?
Moderator: General Moderators
How do I get a div to act like a table?
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?
So, is there a way, or are tables the only element that can act like this across all browsers?
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
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.
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.
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?
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?
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
width: auto;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?
?
This:nickvd wrote:width: auto;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?
?
Code: Select all
<style>
#tooltip {
border: 1px solid #777777;
width: auto;
}
</style>
<div id="tooltip">Hello, what's up?</div>
Am I doing it right?
Code: Select all
<style>
#tooltip {
border: 1px solid #777777;
display:inline;
}
</style>
<div id="tooltip">Hello, what's up?</div> 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.Zoxive wrote:Not sure if thats what you want or not.Code: Select all
<style> #tooltip { border: 1px solid #777777; display:inline; } </style> <div id="tooltip">Hello, what's up?</div>
Any other ideas?
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?
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: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?
Code: Select all
<style>
#tooltip {
border: 1px solid #777777;
display:inline;
}
</style>
<div id="tooltip">
Hello, what's up?<br/>
Huh?
</div>
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. :-\