SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float:left in Firefox not displaying correctly

    I'm trying to float navigation to the left and have another box on the right, but when i float the navigation to the left, in firefix, the white background from a previous div disappears. Looks fine in IE, usually the opposite though. Check out the source code: http://www.cbcag.edu/help%5Fplease/index2.asp

    I am open to any suggestions and critiques on my code. Yes, the CSS will be in a seperate file later on.

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    Simply take off the float. You don't need it, as you text is already aligned left in the #mainNav div, but by floating it you are taking the div out of the normal flow, which provokes that extends out of the #container div. It should also work in IE.

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure what you are trying to achieve, but simply removing the "float: left;" seems to solve the problem. Or at least it seems to look fine in Firefox without it.

    (maybe it's not the right way to say it, but floating the div takes it out of the "normal flow", that's why the container shrinks)

  4. #4
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If i take off the FLOAT, then the next DIV that is supposed to go to othe right of that DIV, goes underneath instead. I haven't made the next DIV yet, so maybe i was unclear in my initial post. Here is an updated version with the second DIV put in: http://www.digitalsolutionsstudio.com/cbc.asp

    You can see the back box doesn't extend down in firefox.

  5. #5
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi dss,

    since it seems to me that you do not really want the boxes to float right or left, but you want them at an absolute position (relative to their container), I would switch to absolute postioning if I were you.

    Code:
    body {
    	background-image: url(images/bg.jpg);
    	background-repeat:repeat-x;
    	text-align:center;
    	margin:0;
    	padding-top:20px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	}
    #container {
    	border:1px solid black;
    	width:730px;
    	height:auto;
    	background-color:#FFFFFF;
    	margin:0 auto;
    	padding:5px 5px 5px 5px;
    position: relative;
    	}
    #header {
    	background-image:url(images/header.jpg);
    	width:730px;
    	height:60px;
    	margin-bottom:5px;
    	}
    #mainNav{
    	border:1px solid black;
    	width:500px;
    	height:16px;
    	text-align:left;
    	display:block;
    	padding:2px 0px 0px 5px;
    
    
    	}
    .mainNavItem a{
    	margin-right:15px;
    	color: #999;
    	text-decoration: none;
    	font-weight:bold;
    	}
    .mainNavItem a:hover {
    	color: #000;
    	}
    #search {
    	border:1px solid black;
    	width:210px;
    	height:16px;
    	text-align:left;
    	display:block;
    	padding:2px 0px 0px 5px;
    position: absolute;
    right: 4px;
    bottom: 5px;
    	}
    (the left box is not positioned here, but that is because Ia m lazy ;-))

  6. #6
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seems to have worked. I took out the text-align:center from the container so that IE wouldn't try centerinig the divs and it looks great. Thanks a lot for your time paulm. I will know for sure when i plug everything together at work tomarrow and get it going. Thanks a lot!

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    Well, I didn't know that you wanted to include another box on the right Your question was very specific, so I just answered to that.

    Floating would make sense in a liquid layout, and yours isn't liquid, but quite fixed (so fixed that screen readers for blind people, as an example, are going to have problem with it, but I will not follow that line because I assume that you know your market).

    If you are position your elements, even if it is relatively, you should follow that path all the way. Your layout will work better this way. Mixing floats and positions is complicated, and you need to understand how floats and positions work, because, in both cases, you are taking the containers out of the normal flow, even if you don't give a top, left position and your code is simply

    #container:{position:relative}

    That line will take the container out of the normal flow, even when its position will match the place it would have been if that line didn't exist.

  8. #8
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona
    #container:{position:relative}

    That line will take the container out of the normal flow, even when its position will match the place it would have been if that line didn't exist.
    Really? How do you mean "out of the normal flow"? I would understand what you mean if you were talking about absolute positioning, or floating, but not when it's about positioning relative.

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    when you specify a relative position, you are offsetting the container from the place it should have been if nothing was indicated. Example: Imagine I have this code

    <p>This is <span>just</span> a sentence</p>

    The normal flow would be like this: This is just a sentence.

    But if I had a CSS rule like span{position: relative; top: 1em;}, the word "just" would move down 1 em, and where now we can read the word, we would find a gap.

    When you say that position is absolute, you are placing the container the number of units you indicate from the left top corner of the parent container (important: if the parent has been positioned as well, if not, it would be the top left corner of the first ancestor positioned or, if none positioned ancestor is found, from the root element, html most of the time)

    In both cases, you are moving the container around out of the normal flow.

    Positioning an element (even if you really don't specify a top, left, etc. property) is a trick used when you need to work with the z-index property. The z-index property only works with positioned containers/elements. So you do need to take the container out of the flow to do it, even if you don't really move it from its original place.

  10. #10
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are right of course molona

    But it's just that positioning relative without setting the position values (or setting the values to 0) usually does not influence the normal flow. The only thing, that happens (in practice), is that the relative block element, becomes a container for any absolute positioned elements inside it (as you described).

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    And you can use the stacking levels


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
  •