Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Floats & negative margins in the document flow

    Hi Guys & Gals,

    I have an issue with using negative margins & floats inside of them.

    I have a page with a wrapper div. Inside of the wrapper div is a main content area, and a footer.

    I have some floated elements inside of my main content DIV. Lots of images floated, actually.

    Beneath the content DIV is a footer DIV. It has a height set to it, and it has a negative margin to push it up by the same amount as it's height. Inside of this footer DIV sits two floated DIV's.

    My problem is, these child floated DIVS inside the footer don't obey the negative margin of it's parent in Firefox. They sit directly below the content DIV, and do not obey the negative margin no matter how high up I set the negative margin. As if it is obeying some sort of natural page flow I am not aware of. The parent footer DIV moves up the page quite happily, but it's floated children do not follow it.

    My one working solution with this? Add a float to the parent div. This makes it work, and does not hinder my layout at all - but, what if the footer could not be floated? Why is the floated children of a parent with a negative margin not obeying that negative margin?

    My code thus far (HTML first, then CSS below it. Unneccessary CSS trimmed out):

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tahu FM</title>
    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="top-bg"></div>
    <div style="position:relative; margin: 0 auto; width:890px; background-color:#CCFF99; z-index:3;">
      <div id="header">
        <div class="top-ad"> <img src="images/top-banner.jpg" width="846" height="107" alt="Tahu FM" /> </div>
        <div class="marquee">
          <!--Flash Scrolling Text-->
          <div></div>
        </div>
        <div class="logo"> <img src="images/tahu-logo.jpg" width="890" height="89" alt="Tahu FM - Bringing the entertainment to you" /> </div>
        <div class="navigation">
          <div class="home"></div>
          <div class="about"><a href="#" title="About Us"></a></div>
          <div class="features"><a href="#" title="Features"></a></div>
          <div class="shows"><a href="#" title="Shows"></a></div>
          <div class="register"><a href="#" title="Register with Tahu"></a></div>
          <div class="community"><a href="#" title="Community"></a></div>
          <div class="galleries"><a href="#" title="Photo Galleries"></a></div>
          <div class="contact"><a href="#" title="Contact Us"></a></div>
          <div class="search"></div>
          <div class="searchdiv">
            <input name="search" type="text" class="search" />
          </div>
          <div class="godiv">
            <input type="image" src="images/clear.gif" name="submit" class="go" value="" />
          </div>
        </div>
      </div>
    </div>
    <div id="wrapper">
      <div class="top-padding"></div>
      <div id="content-base">
        <div class="content">
        	<div class="home-left">
            	<img src="images/shows.jpg" width="268" height="219" alt="Tahu FM - Shows" />
                <img src="images/home-register.jpg" width="206" height="219" alt="Tahu FM - Register Now" />
                <img src="images/home-register.jpg" width="206" height="219" alt="Tahu FM - Register Now" />
                <img src="images/shows.jpg" width="268" height="219" alt="Tahu FM - Shows" />
                <img src="images/home-register.jpg" width="206" height="219" alt="Tahu FM - Register Now" />
                <img src="images/home-register.jpg" width="206" height="219" alt="Tahu FM - Register Now" />
                <img src="images/home-banner.jpg" width="694" height="102" alt="Tahu FM" />
                <img src="images/home-banner.jpg" width="694" height="102" alt="Tahu FM" />
                <img src="images/home-banner.jpg" width="694" height="102" alt="Tahu FM" />
                <img src="images/home-banner.jpg" width="694" height="102" alt="Tahu FM" />
    			<div style="clear:both;"></div>
            </div>
            <div style="clear:both;"></div>
    
        </div>
        
      </div>
      <div class="footer">
        <div class="footer-text">Copyright &copy; 2008 tahu fm | <a href="#">Sitemap</a> | <a href="#">Disclaimer</a> | design and developed by Kafanelis</div>
        <div class="footer-img"></div>
      </div>
    </div>
    </body>
    </html>
    Code:
    html, body{
    	width:100%;
    	height:100%;
    	margin:0px;
    	padding:0px;
    }
    body{
    	color:#000000;
    	background-color:#d4d1d0;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    }
    div{
    	position:relative;
    }
    img{
    	display:block;
    	border:0px;
    }
    div#wrapper{
    	z-index:1;
    	width:966px;
    	height:100px;
    	min-height:100px;
    	margin-left:auto;
    	margin-right:auto;
    	background-color:transparent;
    	background-image:url(../images/body-bg.gif);
    	background-repeat:repeat-y;
    	background-position:center;
    }
    html>body #wrapper {
    	height: auto;
    }
    div#content-base{
    	width:966px;
    	height:auto !important;
    	height:519px;
    	min-height:519px;
    	background-image:url(../images/content-bg.jpg);
    	background-repeat:no-repeat;
    	background-position:bottom;
    	background-color:transparent;
    	padding-bottom:70px;
    }
    div.content{
    	width:846px;
    	margin-left:auto;
    	margin-right:auto;
    	height:auto !important;
    	height:539px;
    	min-height:539px;
    }
    div.home-left{
    	width:702px;
    	height:auto !important;
    	height:100px;
    	min-height:100px;
    	float:left;
    	position:relative;
    }
    div.home-left img{
    	float:left;
    	margin-left:5px;	
    }
    div.footer{
    	width:966px;
    	height:110px;
    	background-color:transparent;
    	margin-top:-380px;
    	color:#FFFFFF;
    	font-size:11px;
    	position:relative;
    	
    	background-color:#99CCFF;
    	z-index:4;
    	
    }
    div.footer-text{
    	background-image:url(../images/footer-text.gif);
    	width:621px;
    	height:23px;
    	margin-top:38px;
    	margin-left:65px;
    	float:left;
    	line-height:23px;
    	text-align:right;
    	padding-right:45px;
    	background-color:#CC6600;
    }
    div.footer-img{
    	background-image:url(../images/footer-img.gif);
    	width:180px;
    	height:60px;
    	margin-top:10px;
    	float:left;
    	background-color:#CC6600;
    }
    Last edited by pinkshiro; 07-21-2008 at 11:34 PM.

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Andddd here's a graphical representation of how it does doesn't work (Firefox 3).

    I kind of understand that the floats inside of the parent footer DIV are recognising the floats in the content DIV, and will not float above them, but if i've set a negative margin to their parents and cleared all previous floats, shouldn't the footer children move above the content floats?

    Maybe i'm just trying to acheive what could be achieved with absolutely positioning the parent footer DIV, or even absolutly positioning the children. But i'd love some insight into why this is happening. At the end of the day I already have a solution, by floating the parent...but still, learning something new is good!

    Last edited by pinkshiro; 07-22-2008 at 12:22 AM.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Damn, I just realised in that image I said the parent footer DIV was position absolute, when its POSITION RELATIVE!!!


  •  

    Posting Permissions

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