PDA

View Full Version : Can't get container to grow with internal layers.... please help!



picklesmom
Mar 22nd, 2010, 06:53 PM
Hi there,
I've searched and searched and searched some more over the last few days... various forums, various postings read.... I've tried several things but I just can't seem to find the right suggestions to fix my code.

My problem is not uncommon.... I have a main container that is not growing when I add content to the internal text layer. The text just ends up flowing over on top of the footer.

I've tried setting my footer to bottom:0px; and that seems to keep it at the bottom of my container, so I don't think the problem is with footer settings. I think it's with the container itself. I've currently got the container set to a minimum height so the text remains visible.

I would really appreciate if someone can take a look at my code to see if you can detect the problem. I've struggled with this in the past and would love to be able to figure this one out so I can give my clients more freedom to add/remove text and still have the layout render correctly.

Thanks in advance!



Here is my html:

<!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" />
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="testing.css"></link>
<title>Ascendance Holistic Healing - Contact</title>
<style type="text/css">
<!--
-->
</style>
<script type="text/JavaScript">
<!--
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];}}
}
//-->
</script>
</head>

<body>
<div id="wrapper">
<div id="container">

<div id="headerbox"><img src="images/knot.png" /><img src="images/ascendance-holistic-healing.png" width="471" height="94" /><img src="images/knot.png" alt="" /></div>
<div id="navbox"><strong><a href="index.html">home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="movementhealing.html">movement healing</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="qa.html">q&amp;a</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="events.html">events</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="blog.html">blog</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="links.html">links</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="bio.html">bio</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.html">contact</a></strong></div>
<div id="textbox" class="cushycms">
<h2 class="headtext" title="Heading">Contact</h2>

<h2 class="subheadtext">Tel: 000-000-0000</h2>
<h2 class="subheadtext">Email: <a href="mailto:[email protected]">[email protected]</a></h2>
<h2 class="subheadtext">Contact me about:</h2>
<p class="bodytext">Private Sessions&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Eden Energy Medicine<br />
Speaking Events &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Reiki<br />

Group Workshops&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; Yoga, and Movement Healing<br />
Retreats for Women&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The Alexander Technique<br />
Written Articles &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;High Potency, Organic Skin Care<br />

Holistic Health &amp; Beauty &nbsp;&nbsp; &nbsp;Yoga Therapy For The Face(lift)</p>
<p class="bodytext"><br />
Feel free to email or call me with your questions and inquiries. <br />
Thank you,<br />
Emily <br />

</p>
<p class="bodytext"><br />
&quot;...the meaning of life is to make the most of your energy...&quot;<br />
--Donna Eden
</p>
<p class="bodytext"><strong>That is the end of my current text area. When i add more below here, it just overlaps the footer and does not bump the footer down as I'd like. What can I do??</strong></p>
</div>

<p class="bodytext">&nbsp;</p>

<div id="imgbox" class="cushycms">
<p><img src="images/emily_163a.jpg" /></p>
</div>
<div id="footerbar" align="center"><span class="footerlinks"><a style="color:white;text-decoration:underline;" href="index.html">home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:white;text-decoration:underline;" href="movementhealing.html">movement healing</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:white;text-decoration:underline;" href="qa.html">q&amp;a</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:white;text-decoration:underline;" href="events.html">events</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:white;text-decoration:underline;"href="blog.html">blog</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:white;text-decoration:underline;" href="links.html">links</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:white;text-decoration:underline;" href="bio.html">bio</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:white;text-decoration:underline;" href="contact.html">contact</a> </span><br /><br />
<span class="footertext">&copy;2010 Ascendance Holistic Healing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;All Rights Reserved</span></div>

<div id="sidebartext" class="cushycms">
<p>&nbsp;</p>
<p>Join me on <br />&nbsp;Facebook<br />&nbsp;<img src="images/Facebook-64.png" width="64" height="64" border="0" /><br />
</p>
</div>
</div>
</div>

</body>
</html>






And here is my CSS:

/* CSS Document */

body {
font-family: Arial, Helvetica, sans-serif;
text-align: center; /* for IE */
margin: 0 0 0 0;
background-color: #d7c6ff;
background-repeat: repeat;
height:100%;
}
#wrapper {
font-family: Arial, Helvetica, sans-serif;
text-align: center; /* for IE */
margin: 0 auto;
height: 200px;
width: 100%;
background-image: url(images/bg_header.jpg);
background-repeat: repeat-x;
}
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
position:relative;
width:1000px;
height:100%;
z-index:1;
min-height:800px;
}

.headtext {font-size: 22px; color: #333; font-style:bold; }
.subheadtext{font-size: 16px; color: #a271e7; }
.bodytext {font-size: 14px; color: #405f50;}
.bodyitalic {font-size: 14px; color: #333; font-style:italic; }
.sidebartext {font-size: 12px; color: #333; font-weight: bold; font-style:italic;}
.footerlinks {font-size: 12px; color: #000;}
.footertext {font-size: 12px; color: #fff;}

a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
}

#headerbox {
position:absolute;
width:700px;
height:101px;
z-index:1;
left: 166px;
top: 23px;
}
#navbox {
position:absolute;
width:731px;
height:25px;
z-index:1;
left: 156px;
top: 164px;
}
#imgbox {
position:absolute;
width:275px;
z-index:1;
left: 50px;
top: 231px;
}
#textbox {
position:absolute;
width:380px;
z-index:2;
left: 342px;
top: 210px;
}
#sidebartext {
position:absolute;
width:290px;
z-index:3;
left: 748px;
top: 219px;
}

#footerbar {
position:absolute;
width:1000px;
height:64px;
z-index:5;
bottom:0px;
background-color: #000000;
padding-top:10px;
}

Excavator
Mar 22nd, 2010, 07:27 PM
Hello picklesmom,
You don't need to set heights on containing divs, like your #wrapper. Their natural behaviour is to expand to contain content so you should just let them.

Divs that contain floats may need cleared one way or another. A lot of times the footer can do that but, in your case ... since you seem to be trying to implement a full-height layout, there is more work to do.
Your #footerbar should be moved out of #container and placed in #wrapper.
Look at this demo of a full height layout (http://nopeople.com/CSS/full-height-layout/index.html).

Excavator
Mar 22nd, 2010, 07:37 PM
Your use of absolute positining is really causing a mess. See the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
Here is a start at just letting elements flow naturally -
/* CSS Document */

body {
font-family: Arial, Helvetica, sans-serif;
text-align: center; /* for IE */
margin: 0 0 0 0;
background-color: #d7c6ff;
background-repeat: repeat;
height:100%;
}
#wrapper {
font-family: Arial, Helvetica, sans-serif;
text-align: center; /* for IE */
margin: 0 auto;
/*height: 200px;*/
width: 100%;
background: url(images/bg_header.jpg) repeat-x;
}
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
position:relative;
width:1000px;
/*height:100%;
z-index:1;
min-height:800px;*/
}

.headtext {font-size: 22px; color: #333; font-style:bold; }
.subheadtext{font-size: 16px; color: #a271e7; }
.bodytext {font-size: 14px; color: #405f50;}
.bodyitalic {font-size: 14px; color: #333; font-style:italic; }
.sidebartext {font-size: 12px; color: #333; font-weight: bold; font-style:italic;}
.footerlinks {font-size: 12px; color: #000;}
.footertext {font-size: 12px; color: #fff;}

a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
}

#headerbox {
width:700px;
height:101px;
/*position:absolute;
z-index:1;
left: 166px;
top: 23px;*/
}
#navbox {
width:731px;
height:25px;
/*position:absolute;
z-index:1;
left: 156px;
top: 164px;*/
}
#imgbox {
width:275px;
float: left;
/*position:absolute;
z-index:1;
left: 50px;
top: 231px;*/
}
#textbox {
width:380px;
float: right;
/*position:absolute;
z-index:2;
left: 342px;
top: 210px;*/
}
#sidebartext {
position:absolute;
width:290px;
z-index:3;
left: 748px;
top: 219px;
}

#footerbar {
width:1000px;
height:64px;
/*position:absolute;
z-index:5;
bottom:0px;*/
clear: both;
background-color: #000000;
padding-top:10px;
}



Just a start mind you. Still more work to do there...

picklesmom
Mar 22nd, 2010, 07:42 PM
Hello Excavator,
Thanks for your prompt reply. I've done what you said.... removed the height indicator from my wrapper and I also removed the footer from my container and put it in the wrapper instead. My footer is now left aligned. How do I get it to align in the center beneath my container if it's outside my container layer?

Just saw that you posted to me again... I am going to try to implement the changes you've made and see what I come up with!

pickil
Mar 22nd, 2010, 07:46 PM
picklesmom, change your css code to look like this:



#container {
margin-left: auto;
margin-right: auto; /*doing this will center the page to the center of the page */
text-align: left; /* counter the body center */
width:1000px;
z-index:1;
min-height:800px;
}

you do not need a positioning on the main container position coding is to position the small divs inside the main one.

picklesmom
Mar 22nd, 2010, 07:46 PM
I'm trying to think logically... and it's not sinking in.
If the wrapper envelops my container and my footer separately, how does my footer know to bump down as the container grows? I thought that, if the footer was inside the container with the other layers, it would kick down accordingly.

pickil
Mar 22nd, 2010, 07:51 PM
everything should be inside the container div. The container div should only have other divs inside of it. It should have no HTML tags directly inside of it except for other div tags. You should have a div tag for the different sections and then the page should piece together how you want it to. You can use this page and view the source to see my div tags.

http://vle2.capella.edu/1235400/FinalProject/index.htm

picklesmom
Mar 22nd, 2010, 07:59 PM
Hello pickil, and thanks for extending your time!

So my page is essentially laid out like this:


<body>
<wrapper>
<container>
<textbox>
</textbox>
<footer>
</footer>
</container>
</wrapper>
</body>


I am just clarifying that because some people use wrapper and container interchangibly if they are only using one.

I am using a wrapper div so my top banner can stretch the full width of my page.
I am using my container to contain everything else.

So, does my footer need to be inside my container as I had it initially or does it need to be in the wrapper? When I take it outside of the container, it moves up to the top beneath my header bar.

Note, I am making all these changes locally and not uploading them to that URL I posted up top. The URL is still showing my initial code.

picklesmom
Mar 22nd, 2010, 08:15 PM
Your use of absolute positining is really causing a mess. See the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
Here is a start at just letting elements flow naturally -
/* CSS Document */

body {
font-family: Arial, Helvetica, sans-serif;
text-align: center; /* for IE */
margin: 0 0 0 0;
background-color: #d7c6ff;
background-repeat: repeat;
height:100%;
}
#wrapper {
font-family: Arial, Helvetica, sans-serif;
text-align: center; /* for IE */
margin: 0 auto;
/*height: 200px;*/
width: 100%;
background: url(images/bg_header.jpg) repeat-x;
}
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
position:relative;
width:1000px;
/*height:100%;
z-index:1;
min-height:800px;*/
}

.headtext {font-size: 22px; color: #333; font-style:bold; }
.subheadtext{font-size: 16px; color: #a271e7; }
.bodytext {font-size: 14px; color: #405f50;}
.bodyitalic {font-size: 14px; color: #333; font-style:italic; }
.sidebartext {font-size: 12px; color: #333; font-weight: bold; font-style:italic;}
.footerlinks {font-size: 12px; color: #000;}
.footertext {font-size: 12px; color: #fff;}

a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
}

#headerbox {
width:700px;
height:101px;
/*position:absolute;
z-index:1;
left: 166px;
top: 23px;*/
}
#navbox {
width:731px;
height:25px;
/*position:absolute;
z-index:1;
left: 156px;
top: 164px;*/
}
#imgbox {
width:275px;
float: left;
/*position:absolute;
z-index:1;
left: 50px;
top: 231px;*/
}
#textbox {
width:380px;
float: right;
/*position:absolute;
z-index:2;
left: 342px;
top: 210px;*/
}
#sidebartext {
position:absolute;
width:290px;
z-index:3;
left: 748px;
top: 219px;
}

#footerbar {
width:1000px;
height:64px;
/*position:absolute;
z-index:5;
bottom:0px;*/
clear: both;
background-color: #000000;
padding-top:10px;
}



Just a start mind you. Still more work to do there...

Hi there,
Just trying to follow this suggestion code. So, what you're saying is my internal divs need nothing more than height and/or width specifications and then you've added left float and right float to the image box and text box respectively?

I tried plugging in the code you posted (noting it still needs work as you said) but it's got everything aligned incorrectly now and I don't even know how to fix it other than adding alignment attributes which you coded out.

Is there a way for me to still be able to specify the positioning of my internal layers and simply have the growing text content box bump my footer down?

I clarified in another post above that I am using both wrapper and container divs.... am I really supposed to put the footer outside the container into the wrapper? Just can't wrap my brain around that one since it's the container's content that I want to control the positioning of the footer, know what I mean?

Again, thanks for your time, responses, attention to detail and patience.

Excavator
Mar 22nd, 2010, 08:32 PM
Are you really wanting the full height layout?
That is a layout where the footer is at the bottom of the screen on all pages, even pages with only a small ammount of content that would not normally force the footer to the bottom.

picklesmom
Mar 22nd, 2010, 08:37 PM
Are you really wanting the full height layout?
That is a layout where the footer is at the bottom of the screen on all pages, even pages with only a small ammount of content that would not normally force the footer to the bottom.

Are you asking this because I have 100% somewhere in my code? I may have added that as it was a suggestion in another forum to get something to render correctly.

I simply need the site to show the amount of content that is on each page. The footer should adjust accordingly. If you mean that a full height layout is going to bump the footer way down on the page even if that page has a little content, then no... I don't want that.

I want my footer to fall nicely beneath the content without a big gap above it on any of the pages. Hope that answers your question.

pickil
Mar 22nd, 2010, 08:40 PM
If I were you I would do this



<body>
<container>
<header>
</header>
<textbox>
</textbox>
<footer>
</footer>
</container>
</body>


But if you have your header inside the container in its own div tag and then do not specify the width or position it will appear at the top the width of the container div which you have now as 1000px.

Excavator
Mar 22nd, 2010, 08:40 PM
I clarified in another post above that I am using both wrapper and container divs.... am I really supposed to put the footer outside the container into the wrapper? Just can't wrap my brain around that one since it's the container's content that I want to control the positioning of the footer, know what I mean?

Again, thanks for your time, responses, attention to detail and patience.
Write the markup with no styling in the order you'd like to present your content. Top to bottom, left to right.
When styling your layout with your CSS, if you let each div take up it's own space and react to the div above it, that is the natural flow of the document. You should make certain that each div reacts to the one above it as expected so you can address any display/float/margin issues before moving on.
Because your #container basically holds a 3 columns, moving #footerbar outside of that lets your 3 columns influence #container which can then influence #footerbar. Footer would work fine inside #container if you weren't doing the full-height layout.

Did any of that make sense?

picklesmom
Mar 22nd, 2010, 08:42 PM
If I were you I would do this



<body>
<container>
<header>
</header>
<textbox>
</textbox>
<footer>
</footer>
</container>
</body>


But if you have your header inside the container in its own div tag and then do not specify the width or position it will appear at the top the width of the container div which you have now as 1000px.

If the header is inside my container, it's not running the full width of my page. Say my container is set at 1000px.... the top header would just be centered right? It wouldn't go edge to edge as I want.

Does this just mean my container needs to be set at 100% height and width so it covers the user's whole screen?

Sorry, I am used to this absolute positioning which appears to be the reason I can't get this to work.

pickil
Mar 22nd, 2010, 08:42 PM
I want my footer to fall nicely beneath the content without a big gap above it on any of the pages. Hope that answers your question.

If this is what you want, get rid of the min-height in the container css tag and add clear: both; to the footer css like this



footer {
clear: both;
}


The clear both make the footer drop below everything on the page

pickil
Mar 22nd, 2010, 08:46 PM
If the header is inside my container, it's not running the full width of my page. Say my container is set at 1000px.... the top header would just be centered right? It wouldn't go edge to edge as I want.

Does this just mean my container needs to be set at 100% height and width so it covers the user's whole screen?

Sorry, I am used to this absolute positioning which appears to be the reason I can't get this to work.


No if you want your header to be the full width of the screen then simply get rid of the width tag, if there is no width tag or height tag then the browser will adjust to the full with of the browser the 100% height and width is extra coding you do not need.

picklesmom
Mar 22nd, 2010, 08:56 PM
Write the markup with no styling in the order you'd like to present your content. Top to bottom, left to right.
When styling your layout with your CSS, if you let each div take up it's own space and react to the div above it, that is the natural flow of the document. You should make certain that each div reacts to the one above it as expected so you can address any display/float/margin issues before moving on.
Because your #container basically holds a 3 columns, moving #footerbar outside of that lets your 3 columns influence #container which can then influence #footerbar. Footer would work fine inside #container if you weren't doing the full-height layout.

Did any of that make sense?

Hello,
Yes, it makes sense.... letting things flow, working in order... troubleshooting along the way. If I don't want the full height layout then it sounds like I can have my footer inside the container.

When i try to implement the right float you suggested on my text layer, it actually DOES make the footer jump down as it grows. So, floating the element makes it work how I want it to. But, alignment wise, my text layer is (floating) on the right and I need it in the middle. Having said that, I assume I need to change the code of my container. Right now it's set at 1000px and centered on the screen.

In order for me to have my image box on the left, floating text box in the center and then another column on the right, how do I make them align correctly without using left/top positioning?

pickil
Mar 22nd, 2010, 09:03 PM
Hello,
Yes, it makes sense.... letting things flow, working in order... troubleshooting along the way. If I don't want the full height layout then it sounds like I can have my footer inside the container.

When i try to implement the right float you suggested on my text layer, it actually DOES make the footer jump down as it grows. So, floating the element makes it work how I want it to. But, alignment wise, my text layer is (floating) on the right and I need it in the middle. Having said that, I assume I need to change the code of my container. Right now it's set at 1000px and centered on the screen.

In order for me to have my image box on the left, floating text box in the center and then another column on the right, how do I make them align correctly without using left/top positioning?

You can use absolute position in conjunction with floating positioning, so the footer container will float while the pictures and stuff can be absolute. just use clear: both; in the css of the footer tag and it should clear everything and jump to the bottom of the page, to get the footer in the center have left and right margins in the footer tag set to auto and then select a width for the footer ie



#footer {
clear: both;
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}


this will make the footer clear all other divs set the width to 800px, center it and align the text to the center of the 800px. hope this helps :)

picklesmom
Mar 22nd, 2010, 09:05 PM
No if you want your header to be the full width of the screen then simply get rid of the width tag, if there is no width tag or height tag then the browser will adjust to the full with of the browser the 100% height and width is extra coding you do not need.

This doesn't work if my container is a set size. As I said before, if my container is 1000px and I put the header div inside the container, even if I don't specify height and width for the header, it's only going to extend the width of what's holding it which is the 1000px container div.

Sorry, I've been trying to follow what both of you have been suggesting and it seems like two completely different things.

Should I not have my container have a set width then? Perhaps a 100% width to achieve what you are suggesting?

On a side note, I think my head is going to spin right off any second now. lol

picklesmom
Mar 22nd, 2010, 09:16 PM
You can use absolute position in conjunction with floating positioning, so the footer container will float while the pictures and stuff can be absolute. just use clear: both; in the css of the footer tag and it should clear everything and jump to the bottom of the page, to get the footer in the center have left and right margins in the footer tag set to auto and then select a width for the footer ie



#footer {
clear: both;
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}


this will make the footer clear all other divs set the width to 800px, center it and align the text to the center of the 800px. hope this helps :)

When I do this, my footer *is* centered, however, it's not at the bottom of my page. What is it that's supposed to be placing my footer below the rest of the content? Right now, it's overlapping my header and nav.

Excavator
Mar 22nd, 2010, 09:19 PM
If the header is inside my container, it's not running the full width of my page. Say my container is set at 1000px.... the top header would just be centered right? It wouldn't go edge to edge as I want.

Does this just mean my container needs to be set at 100% height and width so it covers the user's whole screen?

Sorry, I am used to this absolute positioning which appears to be the reason I can't get this to work.

Here is a start with no positioning, just letting elements fall as they may and nudging them around with margins where needed.
You will need to find a good 3 column layout that will fit in #container.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding: 5px 0 0 0;
font: 100% Arial, Helvetica, sans-serif;
background: #d7c6ff;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
background: #999 url(http://www.ascendanceholistichealing.com/images/bg_header.jpg) repeat-x top;
overflow: auto;
font-size: 0.8em;
}
#headerbox {
height: 101px;
width: 679px;
margin: 0 auto;
padding: 26px 0;
}
#navbox {
height: 46px;
width: 731px;
margin: 0 auto;
line-height: 45px; /*to vertically center text*/
text-align: center; /*for demo only*/
background: #f00; /*for demo only*/
}
#container {
width: 1000px;
margin: 0 auto; /* align for good browsers */
position: relative; /*I just left this in in case you have an ap elements later - it may not be needed*/
overflow: auto; /*to clear any floats you may put in container*/
background: #ccc; /*for demo only*/
}
#footerbar {
height: 64px;
width: 100%;
line-height: 64px;
background: #000000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="headerbox">
<img src="http://www.ascendanceholistichealing.com/images/knot.png" width="100" height="100" alt="knot" />
<img src="http://www.ascendanceholistichealing.com/images/ascendance-holistic-healing.png" width="471" height="94" alt="logo" />
<img src="http://www.ascendanceholistichealing.com/images/knot.png" width="100" height="100" alt="knot" />
<!--end headerbox--></div>
<div id="navbox">
menu would go here
<!--end navbox--></div>
<div id="container">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end container--></div>
<div id="footerbar">
footer stuff in here
<!--end footerbar--></div>
<!--end wrapper--></div>
</body>
</html>

Just in case, I left the position:relative; in #content so any absolute positioned columns would work.
The three columns would work fine with the left/right floated left/right and margin the middle column's side the width of the left/right.

Excavator
Mar 22nd, 2010, 09:27 PM
In order for me to have my image box on the left, floating text box in the center and then another column on the right, how do I make them align correctly without using left/top positioning?


I liked this one enough to make a demo page...

http://nopeople.com/CSS/simple3column/index.html#preview

picklesmom
Mar 22nd, 2010, 09:29 PM
Here is a start with no positioning, just letting elements fall as they may and nudging them around with margins where needed.
You will need to find a good 3 column layout that will fit in #container.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding: 5px 0 0 0;
font: 100% Arial, Helvetica, sans-serif;
background: #d7c6ff;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
background: #999 url(http://www.ascendanceholistichealing.com/images/bg_header.jpg) repeat-x top;
overflow: auto;
font-size: 0.8em;
}
#headerbox {
height: 101px;
width: 679px;
margin: 0 auto;
padding: 26px 0;
}
#navbox {
height: 46px;
width: 731px;
margin: 0 auto;
line-height: 45px; /*to vertically center text*/
text-align: center; /*for demo only*/
background: #f00; /*for demo only*/
}
#container {
width: 1000px;
margin: 0 auto; /* align for good browsers */
position: relative; /*I just left this in in case you have an ap elements later - it may not be needed*/
overflow: auto; /*to clear any floats you may put in container*/
background: #ccc; /*for demo only*/
}
#footerbar {
height: 64px;
width: 100%;
line-height: 64px;
background: #000000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="headerbox">
<img src="http://www.ascendanceholistichealing.com/images/knot.png" width="100" height="100" alt="knot" />
<img src="http://www.ascendanceholistichealing.com/images/ascendance-holistic-healing.png" width="471" height="94" alt="logo" />
<img src="http://www.ascendanceholistichealing.com/images/knot.png" width="100" height="100" alt="knot" />
<!--end headerbox--></div>
<div id="navbox">
menu would go here
<!--end navbox--></div>
<div id="container">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end container--></div>
<div id="footerbar">
footer stuff in here
<!--end footerbar--></div>
<!--end wrapper--></div>
</body>
</html>

Just in case, I left the position:relative; in #content so any absolute positioned columns would work.
The three columns would work fine with the left/right floated left/right and margin the middle column's side the width of the left/right.

Thank you very much for your time and effort in helping me. I will take your suggestions and try to rebuild the site. Already off the clock... sigh. Guess we can call the rest a "learning experience?" Thanks again.

Off to find the remainder of my brain somewhere......