PDA

View Full Version : Div's not extending; Footer moving Up


BizzyWizz
08-30-2011, 06:47 PM
I see a couple of team leaders are on-line and I would REALLY APPRECIATE some help. I've been trying to figure out what I'm doing wrong all morning (I'm new to CSS and just upgraded to DW CS5.5), so it's probably some simple mistake that I'm not knowledgable enough to find on my own.

I have my site set up for the MIDDLE of the page like this:

#outerDiv (surrounds the entire middle of the page between the header and the footer)

#specialsDiv (sits to the top left corner of Outer Div)
#mainContent (sits right below specialsDiv)
#rightContent (sits to the top RIGHT corner of Outer Div)
#greenBox (sits to the top RIGHT corner of rightContent)
#formContainer (sits at bottom of greenBox and within the rightContent container)
#footerDiv (suppose to "clear" the div's abov it)

Here's my problems (yup, plural -- problemS)

1. outerDiv won't flow all the way down to include all of #mainContent Div and/or #rightContent div

2. #footer is jumping up into both mainContent & rightContent div's

And, yes, I know my form has the merge tags showing and the html errors -- copy/pasted from MailChimp and don't know what's wrong. I have an e-mail into them. They're not very helpful though.)

If someone could please look at my CSS and HTML (attached) to see what I've missed, I'd really appreciate it -- I mean I'd REALLY APPRECIATE IT!!!

I also did upload this horrible page to my remote server. It's www.bizreka.com . This is about the only thing I've uploaded, so most of the links won't have any pages attached.

BizzyWizz
08-30-2011, 07:10 PM
I guess css and html files don't attach. I included the relevant css below for the above div's. I accidently called the middle page content area #outerDiv
above. It should said #contentDiv above. #outerDiv is the container that surrounds my entire page. #contentDiv I'm using as the container for the middle of my page between the header and the footer.

#outerDiv {
width: 960px;
margin: 0 auto;
position:relative;
}
#contentDiv {
width: 940px;
height: 100%;
padding: 10px;
background-color: #FFF;
position: relative;
top: 6.6em;
float: left;
}
#contentDiv #specialsContent {
position:absolute;
float:left;
width: 335px;
padding:5px;
height:175px;
border-right:3px dashed #3CF;
z-index: 10;
}
#contentDiv #mainContent {
position:absolute;
top:12em;
width: 335px;
padding: 5px;
height: 100%;
border-right: 3px dashed #3CF;
float: left;
z-index: 20;
left: 11px;
}
#contentDiv #rightContent{
position:relative;
float:right;
width:550px;
/* [disabled]height:100%; */
}
#rightContent #greenBox {
position:relative;
float:right;
width:549px;
height:380px;
background:url(../biz_images/greenBoxHomePage.gif) no-repeat;
top: 1em;
}

#footer {
background:url(../biz_images/footer_floridaMap.png) no-repeat;
width:960px;
height:500px;
padding: 0;
clear: both;
margin-top: 15px;
position: relative;
}

domedia
08-30-2011, 09:51 PM
Hi Bizzy,

All we need are links to the page in question, so you're good :)

1. outerDiv won't flow all the way down to include all of #mainContent Div and/or #rightContent div

This is because you've absolutely positioned #mainCOntent.
As far as outerdiv is concerned, it doesn't care where @mainCOntent is placed on the page.

Do no use absolutely positioning for layout.

2. #footer is jumping up into both mainContent & rightContent div's


Your layout is a mix of elements that are floated, but full width (?) and absolutely positioned elements. I doubt it will work :-/

BizzyWizz
08-31-2011, 12:22 PM
I changed the #contentMain position from relative to absolute to get it to "stick" to the left side and UNDER the div #specialsContent. The #rightContent then floats to the right edge and I have a two column layout with 3 div's.

I'm not sure what you mean to provide links to the pages (Css and Html). I did upload this horrible looking page remotely at my hosting company and the web address is: www.bizreka.com (http://www.bizreka.com) so you can see what it's doing. How do I link in the css and html pages from my computer?

I know I'm doing something really wrong and that's why the #footer is creeping up the page even those I've tried setting float:clear and also tried clear:both; and why the #contentDiv (provides the white background for the middle) isn't extending, but I don't know why. I think I've read every forum/article on the web on this positioning and I still can't get it right.

I do have it working on my test server now, but only because I actually set the height of both the left and right content containing blocks and then I had to absolute position the footer beneath then and set it's top margin off of the #contentDiv. It all lined up and it works in Browser lab for about 7 browsers. (not IE6, of course).

Any suggestions? I'll send the links if you'll tell how to do that? I tried the attachment, but it doesn't seem to allow those extensions.

DWcourse
08-31-2011, 07:31 PM
Why don't you start with one of Dreamweaver's built-in layouts and customize that?