I have been told, repeatedly, that I should layout my pages using CSS rather than tables. There are lots of good reasons for this.
However, there's one thing that that I can do with tables, that I can't figure out how to do with CSS. With tables, I can specify a cell has width 1px, and the actual width of the box will be just large enough to contain the element in the cell. With div's, the width of the box expands to the size of the enclosing element.
So, for all of you CSS wizards out there, is there a way to tell CSS, "make this div just large enough to contain the element"?
OMG. If you figure it out, tell me.
I don’t have a pure-CSS solution, but I came up with a hack. I do 99% of the layout in CSS, but I wrap things in a slim table when I want to put a min-size box around them.
CSS: (not sure if this is minimal or not)
td,tr,table { padding: 0; margin: 0; } .tightbox { margin: 0 auto; } td.tightbox { width: 1px; } .boxframe { border: 1px solid #000; background-color: #f7f7f7; }HTML:
Tested in Firefox 2 and IE 7.
CSS: (not sure if this is minimal or not)
You could probably compress the declarations, but it’s not terrible.
Nice workaround, but I still want CSS to do it natively. *sulks*
I found a solution
Boxes have a width and a margin and a padding. Does { width:1em; margin: 0; padding:0 } do what you want?
Em-sizing only works for text-only elements.
Nope, see above. In Firefox 2, I see a 1em-width red box starting at the far left “testing”.
If you specify width and margin and padding, CSS defines the box as over-constrained and changes either margin-left or margin-right to “auto”.
I think I read somewhere that IE actually WILL do what I want, but only because it’s buggy.
The magic CSS you need is the display attribute. You want the div to not be this huge thing, but to only be this little thing. That means that it shouldn’t go all the way to the newline. Which means that you want to use { display: inline } instead of the default for divs, which is { display: block } If you also want to to take up a newline, then you need two divs – one inner one that is inline for looks and one that is block-layout for the newline.
The source to my other comment was
<div style="border: 1px solid rgb(0, 0, 0); margin: 0pt; padding: 0pt; background-color: rgb(204, 0, 0); display: inline;">That works for simple text, but I need to be able to put block elements inside the box (imagine trying to frame a vertical navigation bar, for example). Curiously, it does what I want in IE 7, but not in Firefox 2.
I think that “display: inline-block” might be what I want, but it’s not well-supported yet.
“display: table” does what I want in Firefox, but IE ignores it. I could condition do “display: table” or “display: inline” depending on the user’s browser, but this seems rather fragile.
I found this website, which let’s you play with the different “display” settings (scroll to the bottom of the page).
My kingdom for \mbox!
I think you are screwed, dude.
They just haven’t yet figured out how to make CSS as useful and easy as tables.
Just to be more clear, I want to do something like this:
Oops.
<div class=”tightbox>
A bunch of content that may include more div’s, tables, images, floats, other complex things.
</div>
Here’s a brief counter-example. Sorry for the multitude of replies.
testing
It kind of sounds like you want all subelements to also be displayed inline
yourdivname * {display: inline;
}
yourdivname p {
clear: both;
}
Because the problem is that subelements with display: block will go as far as they can rather than as little as they can. The
clearstuff reenables a sort-of-block-layout approach.Do you have a graphic example of what you’re trying to achieve visually?
Yes, if you look at the Poker Sleuth website, I’m making the box around the navigation bar on the left, as well as the box around the main content in the middle. Right now it works, because I’m using tables for that bit (the rest of the layout is CSS though).