1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Firefox float / background problem!?

Discussion in 'CSS' started by atlantis11, May 6, 2006.

  1. #1
    I have a problem with Firefox display of background or background-color tag if using float.

    I want to set a background color to the #container in which there are two columns. To make them side by side i have used float left and float right tag in each of them. If I set a background color to the whole container looks just fine in IE, but FF display blank background. Help!

    Here is a relevant piece of code:
    SEMrush
    html code:
    <div id="container">
    <div id="middle"> blahblah1</div>
    <div id="left">blahblah2 </div>
    </div>


    css:
    #container {
    min-width: 780px;
    width: 780px;
    text-align: left;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background-color: #df572F;
    }

    #middle {
    float: right;
    width: 460px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    }

    #left {
    float: left;
    width: 170px;
    padding: 0px;
    border: 0px;
    }
     
    atlantis11, May 6, 2006 IP
    RomanticGuy likes this.
    SEMrush
  2. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #2
    Your problem is that by spec, contained DIV's are taken out of the flow of the document. Because of this, your container div is considered empty by compliant browsers - of which IE is not.

    Place the following code at the bottom of your stylesheet:

    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    Code (markup):

    and then change your html to:
    <div id="container" class="clearfix">
    <div id="middle"> blahblah1</div>
    <div id="left">blahblah2 </div>
    </div>
    Code (markup):
    And if you would like your page centered, change your #container margin to:
    margin:0 auto;
    Code (markup):
     
    Greg-J, May 6, 2006 IP
    depi, RomanticGuy and Logician like this.
  3. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #3
    Something else to consider is that IE does not support min-width without using javascript(you can embed it via expression or link to it via .htc in your stylesheet if you want).

    Depending on the exact look you're after, you can acomplish this layout without floating both divs. Keeping your markup the same, you can change your stylesheet to the following:

    #container {
    	width:780px;
    	text-align: left;
    	margin:0 auto;
    	background-color: #df572F}
    #middle {
    	float:right;
    	width:460px}
    #left {
    	width:170px}
    Code (markup):
    I'm really not an expert. You have to really devote yourself to this crap to want to call yourself one. But unless I'm missing something here, the above will do exactly what you want it to.

    A couple helpful hints:
    1. You only need to set padding and margin to 0 if it has padding or margin by default. Mainly just form input p h and the body tag have default margin and/or padding I'm sure I'm missing something in there though.
    2. If setting something to 0px/0%/0em et al, you only need to set it as 0.
    3. Only some input elements have a border by default. You don't need to set these to none.
    4. text-align is always left by default unless the parent controls the alignment and is set otherwise. I don't know if it's good semantics to always set the alignment let or not, but to me it's just a waste of space.

    Hope this helps.
     
    Greg-J, May 6, 2006 IP
  4. atlantis11

    atlantis11 Guest

    Messages:
    8
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It works! Thanks a lot.
     
    atlantis11, May 7, 2006 IP
  5. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #5
    Glad I could help.
     
    Greg-J, May 7, 2006 IP
  6. MediaMisfit

    MediaMisfit Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks a ton... I was having the same problem.. you nailed it.
     
    MediaMisfit, Nov 22, 2006 IP
  7. lisanz

    lisanz Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Brilliant! Thanks so much for posting this - I've been trying to work out the background issue for a summative assignment I'm on for the past 2 hours :D
     
    lisanz, Dec 10, 2006 IP
  8. chintohere

    chintohere Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks a bunch.
    I knew that I was doing something wrong as FF is a compliant browser. But your post rescued me . I wasted 4 hours already on this.
    Thanks a lot again
    Chinto
     
    chintohere, Mar 5, 2007 IP
  9. depi

    depi Active Member

    Messages:
    845
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    68
    #9
    depi, Jul 21, 2007 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #10
    PIE method is bloated.

    overflow:hidden and zoom:1//a fixed width//fixed height or display:inline-block and another declaration with block will do it.
     
    soulscratch, Jul 21, 2007 IP
  11. redondo

    redondo Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    thks grec :)
    u solve my problem :)
    it nice from u ...
     
    redondo, Aug 5, 2007 IP
  12. rxbbx

    rxbbx Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Thnx Grec..
     
    rxbbx, Aug 15, 2007 IP
  13. godboko71

    godboko71 Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    atlantis11 very good question and Greg-J thanks for the great answer worked like a charm for my issue as well. Very glad I found this, thank you Google :)
     
    godboko71, Sep 18, 2007 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,399
    Likes Received:
    1,875
    Best Answers:
    245
    Trophy Points:
    515
    #14
    No offense Greg-J, but GAH, NOT this stupid clearfix bullshit AGAIN. The ONLY thing needed here is overflow:hidden - haslayout isn't even an issue much less the rest of that bull.

    Let's see... min-width with a regular width declaration - that does nothing. Setting border:0 on elements that don't have borders by default, that's helpful...

    Built on the KISS theory:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>float containment test</title>
    
    <style type="text/css">
    body {
    	text-align:center;
    }
    
    div {
    	margin:0;
    	padding:0;
    }
    
    #container {
    	width:780px;
    	text-align:left;
    	overflow:hidden;
    	margin:0 auto;
    	background:#df572F;
    }
    
    #middle {
    	float:right;
    	width:460px;
    }
    
    #left {
    	float:left;
    	width:170px;
    }
    </style>
    
    </head><body>
    
    <div id="container"> 
    	<div id="middle">blahblah1</div> 
    	<div id="left">
    		blahblah2<br />
    		blahblah2<br />
    		blahblah2<br />
    	</div>
    </div>
    
    </body></html>
    Code (markup):
    Mind you, I guessed filling in the blanks, but this works cross browser to IE5.5, 6 and 7, FF, Opera and Safari
     
    deathshadow, Sep 18, 2007 IP
    RomanticGuy likes this.
  15. Riks

    Riks Active Member

    Messages:
    335
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    70
    #15
    Nice solution!

    Thank you.
     
    Riks, Nov 12, 2007 IP