CSS help, again

Update: Never mind this, there's a new test case over here.
<LJ-CUT text=" --More--(3%) ">

Dear Lazyweb,

I'm trying to make a headling-like thing that is a piece of text with a box around it. I used to do this with tables, but I'm taking a hesitant sip of the CSS kool-aid again. I'm trying to give a SPAN a "border" and "padding", and that almost works... except when the SPAN is near the top of the document (or table cell sub-document) in which case, the box runs out past the top margin.

But if I change the "display" from "inline" to "block", then the box takes up the full width of the page, which is not what I want either. How do I make it go?

    This is the top margin of the sub-document, right here.


    Isn't that nice, how it overlaps all over the place. Adding "margin" affects its horizontal placement, but not vertical.

    "View Source" to see what's going on.

Oh, awesome, this looks different under my LJ style than it does when I just save it to a file on its own. Here's what I was seeing before I posted it:

Tags: , , ,

16 Responses:

  1. ralesk says:

    display: block; float: left; ?

    • jwz says:

      Hmmm... that seems to work, but why? What's it floating in?

      • ralesk says:

        The containing element, whatever it may be.

        Of course, you'll have to take care of the margins (and there is also a nasty margin bug present in current stable Gecko, that is, 1.7, that can bite you hard at times), and must not forget to clear: left; where it's appropriate.

      • florisla says:

        'Float: left' means: Move as far to the left as possible, and let subsequent elements take up the space on the right. Only if the subsequent elements are too wide, they will be moved downwards until they get enough space.

        You should check out the FloaTutorial: http://css.maxdesign.com.au/floatutorial/


    • jwz says:

      Also, that only works if I want the damned thing to be flush left. I can't center it on the page, e.g., the heading here.

      • gths says:

        Hmm, try
        display: block;
        margin-left: auto;
        margin-right: auto;
        which should have the effect of centering the block horizontally between the bounds of the containing element.

        CSS is weird, especially when float and clear start getting involved. Using the DOM Inspector in Mozilla is handy in trying to figure it out though.

      • ralesk says:


        H1 {
        display: inline;
        <div style="text-align: center;"><H1 class="heading">Behind the Scenes</H1></div>

        Seems to work for me...

        • ralesk says:

          Then again this is basically the same damn thing as your version having a span classed as heading and the h1 (which is a block element) around it do text-align: center;, but anyway, it WORKSFORME in my Mozilla...

          Eventually I'm not sure if this suggestion has changed anything at all.

        • jwz says:


          Now if only I had the slightest clue why that (seems to) work and the other permutations don't...

          • ralesk says:

            There's never a bad time to blame Microsoft.

          • freiheit says:

            Because that particular permutation has a block on the outside and an inline on the inside, and draws the box around the inline part. In other words, there's two boxes, one that goes to the margins, and inside, one that just barely goes around the text, and you're then drawing a visual line around the interior box, leaving the exterior box transparent.

            Assuming the rest of the stylesheet were to set up a box around anything with a class of "heading", these two things should end up looking the same:
            1) [div style="text-align: center; display:block"][h1 class="heading" style="display:inline"]blah[/h1][/div]
            2) [h1 style="text-align: center; display: block"][span class="heading" style="display:inline"]blah[/span][/h1]

            Or, simplified:
            1) [div style="text-align: center;"][h1 class="heading" style="display: inline"]blah[/h1][/div]
            2) [h1 style="text-align: center"][span class="heading"]blah[/span][/h1]

            Personally, I prefer to put the style on the enclosed span instead of restyling the h1 within a div, because h1 is naturally a block element. (div is naturally block and span is naturally inline) Basically, less fiddling that way.

  2. jferg says:

    Correct me if I'm wrong, but don't you really want to be using <div> instead of <span> for something that's a standalone element?

  3. rrm3 says:

    You could wrap the span in a div and give the div the same amount of padding to both.