SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    First CSS design: background disappears with float

    So, I'm doing my first CSS design... and have run into this problem.

    I'm using IE 6 and Mozilla Firefox to test it.... and my page looks fine in IE but not in Firefox.

    Basically, when I add a "float:left;" or "float:right;" to the div#content the background image of div#pagecontent disappears. (the background image is the tan left side and white right side - so you'll just notice the tan is gone)

    Here's with the float:
    Edit:

    url deleted


    (both ways look right in IE 6 for me... but not Firefox and possibly others)

    Problem areas:

    Code:
    div#pagebody
    	{
    	clear:both;
    	background: url('images/contentbg.gif') repeat-y 50% 0;
    	padding-left:10px;
    	width: 733px; 
    	}
    div#leftside
    	{
    	width:165px;
    	float:left;
    	padding:3px;
    	}
    div#content
    	{
    	float: right; /* causing background image to dissapear in mozilla */
    	width:500px;  /* this actually needs to be bigger but just testing now */
    	color: black;
    	font: 10pt tahoma;
    	}
    Last edited by fillup07; Sep 8, 2005 at 07:48.

  2. #2
    SitePoint Addict Guimauve's Avatar
    Join Date
    Aug 2004
    Location
    Chicago
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    #content
      {
      margin-left: 211px;
      width:500px;
      color: black;
      font: 10pt tahoma;
      }
    Also, there is no need to put div in front of all of your style definitions. # is the way to say that the style is for a specific id, and an id has to be unique on a page. So what you are doing is really overkill.

    Charles

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Have you tried putting a <br style="clear: both;" /> inline between the footer and the floating columns? I know you have it in your footer, but maybe that's not helping.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Phil,

    Egor is correct except that there is a neater way of doing this.
    Code:
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    Then add this code exactly here (must be exactly here):
    Code:
    	 bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb 
    	 bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb 
    	</div>
    <div class="clearer"></div>
    </div>
    <div id="footer"> <span id="footerleft">Copyright 2004 Phil Freo</span> <span id="footerright">Website
    That will enable mozilla to extend its background around the float because floats are removed from the flow and should flow out of the parent according to the specs. Clearing the float before the parents closing div allows the parent to extend and encompass the float with some real content.

    Charles's solution above is partially correct in that the background appears because you have some content that is not floated and therefore the parent is stretched with the content. However if the left column were longer then the left float would spill out of the container and the background would not extend.

    Therefore if you use charles's version then you still need the clear fix above anyway.

    Hope that helps.

    Paul

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Paul,

    I have seen a few people using div's to clear floats instead of br's. Is there a difference, and has one the advantage over the other?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have seen a few people using div's to clear floats instead of br's. Is there a difference, and has one the advantage over the other?
    Well in most cases its mozilla that needs its floats cleared where backgrounds are concerned and then <div style="clear:both"></div> doesn't work for mozilla. It needs something to get hold of and works if you use the break method <br style="clear:both" />.

    However IE doesn't like the break method so you would in fact have to use both in some cases.

    In both cases you will also get extra space that you don't want. Therefore I use the div method with a 1px height tha gives mozilla and ie something to get hold of and then we clear up the space by using a negative margin.

    Code:
    .clearer{height:1px;overflow:hidden;clear:both;margin-top:-1px;}
    I find that the above method works well for both browsers in all the cases I've tested without adding extra space thats not required. (I prefer it even to the after: fix which needs no html but doesn't take into account ie.)

    Paul

  7. #7
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Thanks, I appreciate the explanation. Looks like your solution is best.

  8. #8
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are awesome, thanks a lot.

    You can check out the current progress at
    Edit:

    url deleted


    ... still gotta figure out the nav menu...
    Last edited by fillup07; Sep 8, 2005 at 07:48.

  9. #9
    SitePoint Member
    Join Date
    Sep 2004
    Location
    spain
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I know the problem described above was solved in this case, but I'm afraid that it didn't solved mine. Even with the "clearer" hack it didn't work. So I kept searching the net until I found what it seems to be quite a definitive solution.

    I'ts about setting "height: 1%" at the conflictive element.

    You can find all the needed information about this "Holy Hack" here

    It has worked perfectly in my case. So I guess it can help others.

    Hope this helps some of you.

    Regards

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Thanks for the hack and if you look through some other threads you'll see that we use it a lot already Still its good to remind people about it.

    IE has a lot of trouble determning the width of elements when they are specified by margins alone . In a lot of cases the problems can be solved by giving the offending element a height:1% although you need to hide it from other browers of course.

    There are variety of cases that crop up in ie and using height:1%, position relative, display:inline or display:inline-block can cure the problem. Sometimes a combination of techniques are used

    However for the above examples the clearing of floats should not be dependent on any hacks as floats should have widths and need to be cleared because that is how it works. The clearer technique above works consistently well but again there are always exceptions. There are other techniques for browsers like mozilla using the pseudo class after which is quite a tidy way to do it.

    As usual with CSS nothing is as straight forward as it seems

    Paul


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
  •