homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Center Div STUCK
Do I need a clear spacer div?
Preeminent




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

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

body
{ 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 {
top:0;
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;
}
</style>

<body>
<div id="header">
</div>

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

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

</div>

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

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

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

 

mcs services




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

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

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

Preeminent




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved