CSS Forum

**silverglade** · 08:22 PM

hi, i tried clearing the floats but didnt work, when i put my #lowerlinks div underneath my top floated divs, it goes in the center of them instead of going below them and center. the floated divs are "#home_middle_text" and "#home_the_latest" any help greatly appreciated. thank you again. derek

here is the css for the page.

Code:

@charset "utf-8";
/* CSS Document */

#container {
margin: 0 auto 0 auto;
width: 871px;
height: 950px;
}

#header {
margin: 0 auto 0 auto;
width: 871px;
height: 373px;
}

body {
    background-color: #1C4386;
}

#home_middle_text {
float: left;
margin-top: 20px;
width: 400px;
height: 250px;
color: #ffffff;
font-family: arial, "lucida console", sans-serif;

}

#home_the_latest {
float: right;
margin-top: 20px;
width: 400px;
height: 250px;
font-family: arial, "lucida console", sans-serif;
color: #ffffff;
font-size: x-large;
border: 2px solid blue;
padding-left: 5px;
padding-right: 5px;

}

#home_the_latest img {
float: right;
border: 4px solid white;
margin:0px 5px  0 5px;
}

#lowerlinks {
margin: 0 auto 0 auto;
width: 871px;
height: 284px;
}

#lowerlinks img {
float: left;
margin-left: 10px;
}

and here is the html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<link href="santas_helper.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Santas Little Helpers Home</title>
<style type="text/css">
 
 
</style>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<meta name="" content="santas little helper, charity, new jersey, disabled" />
<meta name="Keywords" content="charity, santas little helper" />
</head>

<body onload="MM_preloadImages('slices_on/images/home2.jpg','slices_on/images/about2.jpg','slices_on/images/news2.jpg','slices_on/images/donate2_05.jpg','slices_on/images/volunteering2.jpg','slices_on/images/photos2.jpg','slices_on/images/events2.jpg','slices_on/images/wish_stories2.jpg','slices_on/images/request_wish2.jpg','slices_on/images/contact2.jpg')">
<div id="container"> 

  <div id="header"> <img src="slices_off/images/header1.jpg" width="872" height="201"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','slices_on/images/home2.jpg',1)"><img src="slices_off/images/home1.jpg" name="Image3" width="61" height="175" border="0" id="Image3" /></a><a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','slices_on/images/about2.jpg',1)"><img src="slices_off/images/about1.jpg" name="Image4" width="78" height="176" border="0" id="Image4" /></a><a href="news_room.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','slices_on/images/news2.jpg',1)"><img src="slices_off/images/news1.jpg" name="Image5" width="111" height="176" border="0" id="Image5" /></a><a href="donate.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','slices_on/images/donate2_05.jpg',1)"><img src="slices_off/images/donate1.jpg" name="Image6" width="59" height="176" border="0" id="Image6" /></a><a href="volunteering.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','slices_on/images/volunteering2.jpg',1)"><img src="slices_off/images/volunteering1.jpg" name="Image7" width="108" height="176" border="0" id="Image7" /></a><a href="photos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','slices_on/images/photos2.jpg',1)"><img src="slices_off/images/photos1.jpg" name="Image8" width="69" height="176" border="0" id="Image8" /></a><a href="events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','slices_on/images/events2.jpg',1)"><img src="slices_off/images/events1.jpg" name="Image9" width="69" height="176" border="0" id="Image9" /></a><a href="wish_stories.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','slices_on/images/wish_stories2.jpg',1)"><img src="slices_off/images/wish_stories.jpg" name="Image10" width="103" height="176" border="0" id="Image10" /></a><a href="request_wish.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','slices_on/images/request_wish2.jpg',1)"><img src="slices_off/images/request_wish1.jpg" name="Image11" width="115" height="176" border="0" id="Image11" /></a><a href="contact_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','slices_on/images/contact2.jpg',1)"><img src="slices_off/images/contact1.jpg" name="Image12" width="98" height="176" border="0" id="Image12" /></a></div>


    <div id="home_middle_text"> The Mission of the Santa's Little Helpers foundation is to make hospitals a kid friendly place that presently has never been accomplished. We are changing the way children think about hospital visits through what kids like best. Watching TV, Viewing DVD Movies, Listening to CD's, playing video games and most importantly, toys, toys, toys! 

    
  <p>>Something magical happens when a kid makes a special effort to give a gift to another child who is going through a difficult time in their life. Little Saint Nick has been doing this for the past three years. Through this little seven year olds efforts, hospitalized children's spirits are lifted which enhances the healing process. 
  </div>
  
  <div id="home_the_latest"> 
    <p>December 2008 - </p>
    <p><img src="home/home1.jpg" width="200" height="141" />Helpers Visits St. Mary's Hospital with their buddies from the NY Islanders.
    </p>
  </div>
    
    <div id="lowerlinks"> </div>
    <!-- end container-->
</body>
</html>

**vangogh** · 03-16-2009, 08:51 PM

It looks like you're missing the closing div on the container div. That might be why clearing the lowerlinks didn't work. Try clearing the lowelinks div after you add the closing div on the container and see if that works.

You can also try adding overflow: auto to the container div (after you've closed it)

**LadynRed** · 03-16-2009, 08:55 PM

You just need to clear the upper floats. Add clear:both to #lowerlinks and it works fine.

**silverglade** · 03-16-2009, 10:12 PM

great!! thanks vangogh and ladynred!! it works great now, thanks for taking the time to look through my code. i was absolutely stuck. i think i understand clearing a little more now. you can put the clear on the object you want under, and not the above objects. i didnt know that , now i know! lol thank you again. derek

**vangogh** · 03-17-2009, 07:40 PM

Glad we could help. Clearing is clearing the floats above. When you float an element it takes it out of the document flow so the element below occupies the space the floated element might be expected to occupy, but no longer does. When you clear an element you're telling it to fall under the floated elements above.