PDA

View Full Version : need to put a centered div underneath float L and R divs


silverglade
03-17-2009, 12:34 AM
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.

@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;
}


here is the html for the page

<!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>

coloeagle
03-17-2009, 12:51 AM
Have you tried adding the clear declaration to your #lowerlinks ?

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

coloeagle
03-17-2009, 12:55 AM
Be sure that all your paragraphs have the end tag </p>

You are also missing the </div> tag for your #container

silverglade
03-17-2009, 02:13 AM
awesome thank you very much coloeagle!, i added clear to lowerlinks, and fixed the p tags and the container, it works great now. thanks for taking the time to look through my code. derek:mrgreen:

coloeagle
03-17-2009, 05:12 PM
Your welcome, glad to help out.