close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Floating footer

Thread began 11/15/2009 1:46 am by CraigR | Last modified 11/16/2009 2:40 am by CraigR | 6128 views | 6 replies |

CraigRBeta Tester

Floating footer

I find CSS to be one area in particular which I find difficult to debug.

In an effort to neatly display a list of items within a repeat region, without the use of tables, I hand coded some divs and placed them within a repeat region.

In my test page, I now find the footer floating half way up the page.

Grateful for any tips / advice

link to basic page...

news.php

test page

news_new.php

Sign in to reply to this post

clickhappy392103

I wonder if a clearMe may work here. I am still learniing also, so my idea may not work.

in between <head> </head> add :

<style type="text/css">
.clearMe {clear:both;}
</style>


then add this to your html (omit the @@@...just showing where I added it)


</div><!-- end of story div-->
</div><!-- end of newsbox div--><hr />
</div>
</div>
@@@<div class="clearMe"></div>
<div id="footer"><a href="http://stonepits.com">&copy;2009 Stonepits.com</a> | <a href="sitemap.php">Sitemap</a></div>
</div>

Sign in to reply to this post

CraigRBeta Tester

thanks for the tip but unfortunately, it doesn't work in this case

Sign in to reply to this post

neilo

Hiya Craig,

Try removing the 'height' attribute from the following:

#outerWrapper #contentWrapper #content #newsbox {
/*background-color: #CCFF00;*/
float: left;
height: 110px;
/*overflow: hidden;*/
width: 945px;
}


To give this:

#outerWrapper #contentWrapper #content #newsbox {
/*background-color: #CCFF00;*/
float: left;
/*overflow: hidden;*/
width: 945px;
}
Sign in to reply to this post

CraigRBeta Tester

cheers neilo

that did the trick, all rows are now displayed.

i updated the css so the test page displays with all of the rows.

this prompts me to ask further questions if you can indulge me (or if you know of a good article).

1. The fix appears to work visually, but when i look at the code in firebug, I notice the following...

The news headlines and content are supplied using a repeat region.
Within this repeat region, i have set up my CSS container for the newsbox, which contains 3 further divs, calendar, headline and story, which repeat when the php page is sent to the browser
When I look at the code with Firebug, i get the first 3 newsbox divs laid out as expected, and then the remaining items are embedded within the fourth newsbox div.

2. the footer now sits nicely below the last row, but without sufficient white space.
I tried adding margin and padding to the footer div with no appreciable difference, is the positioning of the footer affected by other divs ?

3. The spacing in IE is much tighter than in FF, what steps can I take to fix this ?

most of my CSS layouts have been made using css sculptor, and like when using many 'wizards', it is easy to get dependent on them, not fully understanding how the code works.:(

Thanks again

Sign in to reply to this post

neilo

Hi Craig,

The main problem wasn't just the height attrib - there is still a small problem that I didn't see in that you have two unclosed tags in the content div:

<div id="text">' - no closing tags - at lines 175 and 192.

This makes the outerWrapper and contentWrapper appear to be unclosed and nested, and therefore 'containing' (and affecting) the remaining content including the footer.

Remove two instances of <div id="text"> - this clears up the layout nicely and leaves the footer clear, so any margins or padding will apply as it should.

Sorry I didn't spot that earlier.

Sign in to reply to this post

CraigRBeta Tester

cheers neilo

excellent observation.

The div in question was in a text field from the database which (obviously) wasn't in the source code.
(Saves me right for copying and pasting without reading).

Thanks very much for your help, my sanity is now returning

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...