Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Center Div STUCK

Do I need a clear spacer div?



4:55 am on Jul 24, 2008 (gmt 0)

5+ Year Member

Ok guys. I hate to do it, because I really like to try and figure out myself, but I have tried 10 different methods now and I am about to lose it! I have a large header div then left and right column divs and a center div that I need moved down. The left and right divs easily move since they are positioned absolutely, but the center div is not.(although I tried to position it with no luck) I also have a div that contains my navigation(made up of javascript rollovers) and the problem is that my center div is way up into my header and under my "nav" div. I was wondering if I needed a clear spacer div under the header to push down the center div?
Here is my code and I really appreciate it!

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-image: url('skygradient.gif');
background-repeat: repeat;

#header {
margin: 0px;
padding: 0px;
height: 250px;
width: 100%;
background: url('headerclouds.gif');
#left {
position: absolute;
left: 15px;
top: 395px;
width: 200px;
#center {
margin-left: 230px;
margin-right: 230px;
#right {
position: absolute;
right: 15px;
top: 395px;
width: 200px;

#nav {
position: absolute;
width: 700px;
height: 120px;
left: 20px;
top: 270px;

#footer {
position: absolute;
width: 100%;
bottom: 0px;

<div id="header">

<div id="nav">
<a href="http://www.example.com/store.html" onmouseout="MM_swapImgRestore()" onmouseover= "MM_swapImage('nav1','','navbirdover.gif',1)"><img src="navbird1.gif" alt="Example text" name="nav1" width="178" height="75" border="0" id="nav1" /></a><a href="http://www.example.com/bios.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav2','','navbirdoverbios.gif',1)"></a><a href="http://www.example.com/funstuff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav3','','navbirdoverfun.gif',1)"><img src="navbird1.gif" alt="example Stuff" name="nav3" width="178" height="75" border="0" id="nav3" /></a><a href="http://www.example.com/friends.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav4','','navbirdoverfriends.gif',1)"><img src="navbird2.gif" alt="Friends" name="nav4" width="136" height="75" border="0" id="nav4" /></a></div>

<div id="left"><h3 align="center">About Us</h3>

<div id="center"><h1 align="center"><font color="#006633">Welcome to example!</font></h1>


<div id="right"><h3 align="center">Preview</h3>

<div id="footer">
Footer is here damnit!

[edited by: engine at 8:17 am (utc) on July 24, 2008]
[edit reason] examplified [/edit]

mcs services

2:45 am on Jul 25, 2008 (gmt 0)

5+ Year Member

I really do not understand what you want to do...sorry.

Try "wrapping" everything inside a "Container" Div to get control.


4:48 am on Jul 25, 2008 (gmt 0)

5+ Year Member

Ummm, basically what it comes down to is that the center div is just stuck where it is and will not come down with the left and right divs. I am able to move the left and right divs down easily since they are absolutely positioned, but the center div is not and I do not know how to get it to move down.Ahhhhh! I wish I could explain this better. I've tried so many different 3 column layouts and I cannot get them to work with my content.

Featured Threads

Hot Threads This Week

Hot Threads This Month