Help with Div Tag Positioning

rosedani

Member
Hi all,

I'm in the process of putting my own portfolio website together but (as some of you know) I only have a very basic understanding of HTML/CSS in Dreamweaver!

My new basic question is this!

I have a basic structure set up in Dreamweaver which I have put together using CSS and div tags... so far I have a header area which has nested divs inside it to hold the logo and menu bar. I then have a content area where I will put all the relevant pics/text for the page. I then have a footer section at the bottom.

The problem I'm having is that I don't want to set my content div to a fixed height because this part of the site will vary from page to page. I have set the height to auto on the content div but now I don't know how to position my footer div!!

I have to tell the CSS where to position it on the page but obviously because the content div is set to variable height this will change from page to page.

I'm trying to get this first part of my site set up as a template for all other pages so once I have it nailed I will export the CSS to an external style sheet and link it to all the other pages. I will then create specific CSS rules for the content part of each page and keep these as internal CSS for each page.

I can post the code I have so far if it helps... hope the above makes sense!

Cheers
Dan
 
Hi Harry,

Thanks for the link... looks like a very handy piece of coding that I will keep for future projects but it's not quite what I'm after.

What I need is a footer that sticks to the bottom of the content div tag no matter what size the content div is set too. It might be a really simple solution but being new to all this i just can't figure it out!

At the moment I have the content div height set to auto so it expands to fit whatever content I have inside it but I need to know how to position the footer div under it so it sticks to the bottom of the content div no matter how far it expands.

Cheers
Dan
 
Riiiiight, that's very similar to what that does. The following should work:

HTML:
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="sub-content">
</div>
<div id="footer">
</div>
</body>

Code:
/* CSS reset here */body{width:940px;margin:0 auto;padding:0 10px;}#header{width:940px;padding:20px 0;background:#ffc;}#content{width:580px;float:left;margin:0 20px 20px 0;}#sub-content{width:340px;float:left;margin:0 0 20px 0;}#footer{width:940px;padding:20px 0;background:#ffc;}
 
OK, I've tried everything here... I've gone through quite a few tutorial on how to do this properly but they all offer different advice none of which helps me!

I've managed to set up a basic web page using CSS and div tags but certain elements aren't positioning properly.

Here's the code I have so far:

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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Design Routes - Graphic Design</title><style type="text/css">body {    background-image: url(Images/page_template_artwork/grungebackground.jpg);    background-repeat: repeat;    margin-left: 0px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: 0px;}#wrapper {    width: 980px;    position: relative;    margin-top: 0px;    margin-right: auto;    margin-left: auto;    padding: 0px;}#headerwrapper {    background-color: #FFF;    height: 113px;    width: 980px;    margin-top: 0px;    margin-left: 0px;    position: absolute;}#logoarea {    background-color: #CCC;    height: 101px;    width: 247px;    margin-top: 0px;    margin-left: 21px;    position: absolute;    font-size: 9px;    padding: 0px;}#menubar {    background-color: #FFF;    height: 24px;    width: 277px;    position: absolute;    margin-top: 75px;    margin-left: 683px;    font-size: 9px;}#headerdivider {    background-color: #CCC;    height: 14px;    width: 941px;    margin-top: 99px;    margin-left: 20px;    position: relative;    font-size: 9px;}#contentarea {    font-size: 9px;    background-color: #FFF;    padding: 20px;    width: 940px;    position: absolute;}</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></head><body onload="MM_preloadImages('Images/page_template_artwork/menu buttons/about_over.png','Images/page_template_artwork/menu buttons/work_over.png','Images/page_template_artwork/menu buttons/contact_over.png','Images/page_template_artwork/menu buttons/blog_over.png')"><div id="wrapper">  <div id="headerwrapper">    <div id="logoarea"><a href="index.html"><img src="Images/page_template_artwork/dr_logo_02.png" width="247" height="101" alt="Design Routes" /></a></div>    <div id="menubar"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','Images/page_template_artwork/menu buttons/about_over.png',1)"><img src="Images/page_template_artwork/menu buttons/about_up.png" alt="about" name="about" width="64" height="24" border="0" id="about" /></a><a href="work.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('work','','Images/page_template_artwork/menu buttons/work_over.png',1)"><img src="Images/page_template_artwork/menu buttons/work_up.png" alt="work" name="work" width="70" height="24" border="0" id="work" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Images/page_template_artwork/menu buttons/contact_over.png',1)"><img src="Images/page_template_artwork/menu buttons/contact_up.png" alt="contact" name="contact" width="90" height="24" border="0" id="contact" /></a><a href="blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','Images/page_template_artwork/menu buttons/blog_over.png',1)"><img src="Images/page_template_artwork/menu buttons/blog_up.png" alt="blog" name="blog" width="53" height="24" border="0" id="blog" /></a></div>    <div id="headerdivider"><img src="Images/page_template_artwork/header_bar_divider_07.png" width="941" height="14" alt="header divider" /></div>  </div>  <div id="contentarea"></div></div></body></html>

As you can see I have applied a CSS rule to the body tag which tells the page to place a background image in. I have then inserted a div tag called wrapper which I have set up to contain and center all the page elements.

I have then set up a header wrapper within the main wrapper to hold the logo, menu bar and header divider.

I then want the content area to sit directly under the header wrapper but when I insert it it comes in and over laps the header at the top!!!???

In one of the tutorials I followed it told me to use "relative" positioning for all divs that I want to contain other divs and then use "absolute" positioning for all other divs. Even though I have set my divs up this way I can't get the contents div to sit under the header wrapper!

This problem gets even worse when I insert the footer div because that overlaps the header and content area!

I've tried positioning the contents div 114 px down from the top which works but what do I do with the footer which will have to move down as and when the contents div expands?

Am I missing out on a really obvious step?

Thanks in advance for any pointers/help!
Dan
 
First thing, don't use images for your nav and definitely don't use the Dreamweaver rollovers. EVER. Google CSS sprites.

Second, can you post a live link?
 
live link would be cool. Why not set your wrapper as just.

#wrapper {
width: 980px;
margin: 0 auto;
}

are you using a specific framework ?
 
Hi Harry,

Yep, went a bit old school on the menu because I just wanted to make sure things were sitting OK on the page... I'm currently going through some tutorials for setting this up using CSS instead!

I don't have a live link as yet because I haven't set up any webspace for the site.

Any clue on where I'm going wrong with the div positioning? I want to get the main frame of the site set up properly before carrying on. I just need to know what positioning details I need for each div. I've been told to use 'relative' for any container div and absolute for the divs that nest inside the container divs.

I.E. I have used relative positioning for the wrapper, header wrapper and content divs because I want to nest divs inside of these which will be absolute positioned and contain artwork elements/body copy etc.
 
If you want to center a page, use the code I gave, without seeing a link or anything then I don't know what you're trying to create.
 
OK, I will get the web space set up tonight and upload what I've done so far so you can see it all live.

Cheers
Dan
 
Half of the problem you have is with your understanding of position property, and how it effects the element its applied to, its children and to other elements within the document flow.

Have a read through this, should help.

CSS position property
 
Cheers Geoff... that's exactly what I was looking for... all is clear now! I will post the results here once I have the page template up and running so you can all chip in with suggestions.

Thanks again!
 
Back
Top