Forums

CSS

This topic is locked

CSS Layout

Posted 19 Apr 2005 12:52:37
1
has voted
19 Apr 2005 12:52:37 Dhawal Vora posted:
I am currently designing a site for myself and facing some minor layout issues.

I am using CSS for the Layout. What I haven't been able to achieve is the footer section.

I am using a header file which too uses the CSS.

I can display the contents of the page just fine. what I am having a issue with is placing the footer at the very bottom of the page.

Any Suggestion?

Replies

Replied 19 Apr 2005 15:36:14
19 Apr 2005 15:36:14 Dave Thomas replied:
for a footer to be positioned properly, your layout needs to use a 'container div' that all the other divs are nested in.
then your footer is absolutely positioned bottom:0px;

read this:
www.dmxzone.com/showDetail.asp?TypeId=28&NewsId=6439

regards

Dave Thomas
<b>DMX Zone Manager</b>
Replied 19 Apr 2005 15:48:34
19 Apr 2005 15:48:34 Matt Bailey replied:
It does largely depend on how your page is designed. However, here are a couple of things to get you started.

Here's a link to a tutorial that shows you how to set up a minimum height 'prop':

www.greywyvern.com/code/min-height-hack

The thing that may be of interest to you is that you need to put something below your 'prop' for it to 'push down on' - perfect for a footer!

Another way of doing it is to wrap your content in a containing DIV and then create a footer DIV with the bottom positioning set to 0.

Your HTML would look something like this:

<pre id=code><font face=courier size=2 id=code>&lt;div id="container"&gt;
&lt;div id="header"&gt;Your header here...&lt;/div&gt;
&lt;div id="content"&gt;Your content here...&lt;/div&gt;
&lt;div id="footer"&gt;Your footer here...&lt;/div&gt;
&lt;/div&gt;</font id=code></pre id=code>

And your CSS would look something like this:

<pre id=code><font face=courier size=2 id=code>body {
text-align: center;
margin: 30px;
background: #EEEEEE;
}

div#container {
width: 760px;
text-align: left;
background: #FFFFFF;
}

div#header {
width: 700px;
padding: 30px;
background: #CCCCCC;
}

div#content {
width: 700px;
padding: 30px;
}

div#footer {
width: 700px;
bottom: 0px;
padding: 15px 30px;
background: #CCCCCC;
}</font id=code></pre id=code>

If your content DIV is left 'as is' it will extend downwards naturally, pushing the footer down with it. If you set a height for your content DIV the footer should (I haven't tested it) sit at the bottom of your content div.

Have a play and let me know how you get on.

___________________________________
* Sorry... how do you do that again?... *
Replied 11 Apr 2013 07:27:08
11 Apr 2013 07:27:08 David Hall replied:
CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see! HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look.
Replied 23 May 2013 10:28:37
23 May 2013 10:28:37 andre hammink replied:
it is an option to nest it to the bottom with a bottom: 0; attribute, but you could also choose to make the footer in your wrapper, so you can float it below your other divs

Reply to this topic