SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast ericthehalfbee's Avatar
    Join Date
    Oct 2001
    Location
    Auckland, NZ
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rendering of containing boxes by Netscape 6

    I'm having problems with the sizing of a containing box which contains two other boxes.

    If I use the following in the style decleration
    #mainbox {
    width:90%;
    height:auto;
    margin:0px auto;
    margin-top:10px;
    margin-bottom:10px;
    padding:15px;
    background-color:#ffffff;
    }

    #linkbox {
    padding:5px;
    background-color: #000000;
    }
    #content {
    background-color: #b2c38e;
    padding:5px;
    }

    with the following HTML

    <BODY BACKGROUND="bg.jpg" bgcolor="#cccc33" text="#ffffff">
    <div id="mainbox">
    <div id="linkbox">
    <p>link 1</p><p>link 1</p><p>link 1</p>
    </div>
    <div ID="content">
    <h1>Karekare beach lodge</h1>
    <p>Copy goes here, this is a <a href="any.html" class="nodec">link. And some more to fill it up a bit</a></p>
    <p>Second line</p>
    <p>Third line</p>
    </div>
    </div>
    </BODY>
    </HTML>

    everything turns out as expected - a white box surrouding a black box on top of a green box - this is ok in IE & NN

    However if I add a
    float:left; to the #linkbox and
    float:right; to the #content

    it still loks ok in IE but in NN6 the containing box fails to contain the other two.

    Is IE forgiving something or am I missing something else.

    I know I can manually set the height of the white box but taht seems to defeat the object of the excercise.

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's yet another example of IE's poor compliance with standards.

    The DIV element is a block-level element. The effect you're trying to achieve with your float:left would work on an inline element, such as a SPAN, but not by default on a DIV. You could add a display:inline declaration in the CSS of the inner DIVs, but that would be cheating, and as such it is an unreliable solution.

    Use SPAN instead of DIV.
    ----Adopt-a-Sig----
    Your message here!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •