Div not terminating properly.

Giganews Newsgroups
Subject: Div not terminating properly.
Posted by:  CES (no…@none.com)
Date: Sun, 19 Feb 2006

All,
I'm not sure what's causing the problem in FireFox so I'm not sure what to ask...

I'm trying to put a boarder around some text… the problem is that instead of only surrounding the Div <div class="dR4C1"> the boarder extends from the bottom of the <div> to the top of the page. I know it’s an issue with the Div, because if I set the “border:3px double #B5B6B5” to “background color:red;” I have the same problem.

I’ve been working with this all evening thinking that I’ve missed putting in a semicolon or a quotation mark but the code looks correct and this is such a 101 example that theirs not much that could be wrong.

Also I was also wondering is their a way of creating an automatic/expandable boarder that will only surround what text is within the Div, by that I mean if you don’t include a specific width in the CSS the boarder takes up the entire Div. I’ve tried setting the width to auto but that doesn’t seem to work.

If anyone has a clue I would be grateful. Thanks in advance. – CES

  <head>
    <style type="text/css">
        body, div, span, p, form, lable
        {    
            margin:0;
            padding:0;
        }

        body
        {
            text-align:center;
        }

        .dContentFrame
        {
            width:670px;
            margin: 0 auto 0 auto;
        }

        .dR3C1,.dR3C2,.dR3C3
        {
            float:left;
            width:330px;
            height:100px;
        }

        .dR3C2
        {
            width:10px;
        }

        .dR4
        {
            padding:5px 0 5px 0;
        }

        .dR4C1
        {
            width:600px;
            margin:5px auto 5px auto;
            text-align:center;
            border:3px double #B5B6B5;
        }
    </style>
</head>
<body>
    <div class="dContentFrame">
        <div class="dR3">
            <div class="dR3C1">
            Some Data
            </div>
            <div class="dR3C2">
            </div>
            <div class="dR3C3">
            Some Data
            </div>
        </div>
        <div class="dR4" style="">
            <div class="dR4C1">
            This is where the box/boarder should be
            </div>
        </div>
    </div>
</body>

Replies