#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    205
    Rep Power
    12

    [CSS] Headers and the containing block


    In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough.

    I have a containing block, #content_main, defined as such:
    Code:
    #content_main
    {
    	margin-left: 170px;
    	padding: .5cm .25cm 50px;
    }
    Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this:
    Code:
    h1, h2, h3, h4, h5, h6
    {
    	font-family: georgia, serif;
    	border-bottom: 1px solid #009;
    }
    If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks.

    Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts?

    MPEDrummer
    Attached Images
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Is the permissions form block a float? Or, absolute positioned? If so, the rendering is correct. Give the headers a left margin equal to the space allowed for the float.

    If that's not it, give us a live link to the page and to the stylesheet.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    205
    Rep Power
    12
    It's a float, and I was afraid of that.

    I wanted to avoid the specific margin for the header because the permissions table can fluctuate in size depending on the size of the permission names.

    Ah well...thanks.

    MPEDrummer
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Austin
    Posts
    126
    Rep Power
    11
    Can you use a <hr /> between the header and the article?

    Or maybe try this trick:
    http://www.realworldstyle.com/forms.html

IMN logo majestic logo threadwatch logo seochat tools logo