Facing problems in firefox by using divs

Discussion in 'CSS' started by creative_007, Feb 17, 2007.

0
  1. #1
    Hi,
    I tried to make a dynamic page which will resize itself depending on the length of the content uploaded on that particular page. I used an initial wide div and then in it, made another two divs using float.
    However while i am getting it right in internet explorer, it is not so in firefox. Below is the code that i had used. Tell me whether i am doing anything wrong.

    <html>
    <head>
    <title>asd</title>
    <style>
    #a{width:700px; border:1px solid red;}
    #b{width:500px; border:1px solid green; float:left;}
    #c{width:195px;border:1px solid black;float:right;}
    </style></head>
    <body>
    <div id="a">
    <div id="b">asdsd</div>
    <div id="c">asd</div>
    </div>
    asd
     
    creative_007, Feb 17, 2007 IP
  2. Carlito

    Carlito Peon

    Messages:
    679
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Firefox takes any height and width definition as an absolute, so it won't dynamically resize. To do that you'd need to use min-width. Then, of course, IE doesn't interpret min-width, so you still need to set the width for IE. You can do it like this:

    #a { min-width: 700px; }
    *html #a { width: 700px; }

    I'm not a hardcore CSS guy, so maybe I'll get flamed for being a hack, but it does work in all browsers AFAIK. :)
     
    Carlito, Feb 17, 2007 IP
  3. creative_007

    creative_007 Active Member

    Messages:
    318
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Its not the width that i am having problems with, its the height. If i use another div below the big one, in this case b below a , the whole content comes out of the wider div.
     
    creative_007, Feb 17, 2007 IP
  4. naif

    naif Well-Known Member

    Messages:
    468
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    118
    #4
    Add 
    <div style="clear:both"></div>
    Code (markup):
    right after the closing </div> of #c

    So now your HTML code would look something like this:

    
<div id="a">
<div id="b">asdsd</div>
<div id="c">asd</div>
<div style="clear:both"></div>
</div>
    Code (markup):
    That should fix it :)

    Regards,
    -- Naif
     
    naif, Feb 17, 2007 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    While adding a clearing block element will do the job, it is not a best practice. The W3 strongly suggests that browsers ignore empty block elements. You are not guaranteed that the element will be rendered, thus no clearing action.

    There are several methods of clearing or enclosing float elements. See this enclosing float elements demo for the valid means and for IE hacks.

    cheers,

    gary
     
    kk5st, Feb 17, 2007 IP