layout with floats - wrapper problem

[Jaana M]

I managed to get the content depth to run and used bit different way David showed us, to stick the footer to the bottom regardless the content depth BUT
got 2 main issues:
1. why the wrapper refuses to run along the content now is a misery for me! I have spent whole day to fix it, no success whatsoever. I do not have the book David recommended, either.
Do I need another div? I got far too many now but I couldn't get this results other way...

2. How to get footer text out the #main CSS so it would sit in the center and with no light packground? (like on the old version, see second link)

Any recommendations??

Ref to:

http://www.jaanamerilepp.com/Richardsons%20Baker%20revised/bakernew.html

I wanted to look the page like:

http://www.jaanamerilepp.com/Richardsons%20Baker/baker.html

Also, why does the a:hover not work now on the top (#navbar-main)??
PS! I couldn't use the image trick as the middle round corners are also CSS3, I would of needed to add 2 images then, probably??, to the footer and to the top nav bar). The result I got now is not exactly how I wanted but closest option (the border makes only the outer corner rounded, not the inner, unless there is a way to fix this too??)

[David]

Jaana, I recommend you use Firebug to debug your CSS. If you do, you'll see that the background colour on the footer paragraph is caused by this rule:



#back p {
background-color: #EFE5D0;
border-radius: 15px 15px 15px 15px;
margin-left: 20px;
width: 460px;
}
So, all paragraphs inside the element #back will have that colour - that's basically all the paragraphs on your page - including the footer.

[Jaana M]

Ha :) That was easy! I have coded the wrong div, silly me!

Now the wrapper! Why it stops with header div?
I ran through all div's, the wrapper closes after footer!

[David]

It's a bit difficult to tell what's going on because you haven't commented your closing divs but it may be something to do with the partially opened div "sides" - not sure what you're doing there:


<div id="footer"><p>
&copy; 2011 Robertson's Specialist Bakery
<br />
Designed by Jaana Merilepp</p>

</div>
</div>
<div id="sides"

<div id="navbar-sub">

[David]

I've made an example layout (http://www.coursestuff.co.uk/DESI1183/examples/layout/index.html) that uses the principle I described in class yesterday.

215

This is the structural markup:



<div id="wrapper">
<div id="branding">

</div><!-- /branding -->
<div id="navigation">

</div><!-- /navigation -->
<div id="content_area" class="group">
<div id="content_main_container">
<div id="content_main">

</div><!-- /content_main -->
</div><!-- /content_main_container -->
<div id="content_sub1">

</div><!-- /content_sub1 -->
<div id="content_sub2">

</div><!-- /content_sub2 -->
</div><!-- /content_area -->
<div id="footer">

</div><!-- /footer -->
</div><!-- /wrapper -->
Here's the main layout CSS, including clearfix:



* {
padding:0;
margin:0;
}
#wrapper {
width:960px;
margin:0 auto;
}
#branding {
height:150px;
background-color:#777;
}
#navigation {
height:50px;
margin-top:-5px;
background-color:#777;
background-image:url(/DESI1183/examples/layout/column-top.png);
background-repeat:no-repeat;
background-position:bottom;
}
#content_area {
background-color:#777;
background-image:url(/DESI1183/examples/layout/column-middle.png);
}
#content_main_container {
float:left;
width:100%;
}
#content_main {
margin:5px 250px;
}
#content_sub1 {
width:220px;
margin:5px 0 5px -950px;
float:left;
}
#content_sub2 {
width:220px;
margin:5px 0 5px -230px;
float:left;
}
#footer {
height:70px;
width:100%;
clear:both;
margin-top:-5px;
background-color:#777;
background-image:url(/DESI1183/examples/layout/column-bottom.png);
background-repeat:no-repeat;
}
.group:before, .group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}