2 column layout, footer problem

[svenjafour]

After working on this and trying to fix it for over 4 hours now, I have decided to ask for help. This is the template as it looks now:

http://webpages.charter.net/svenjafo...s/template.dwt

I would like to have it all nicely lined up with the navigation bar on the left and the maintext right beside it. The footer should always be below the navigationbar and the maintext, even if I expand the maintext to be very long. I have been unable to fix this myself by trying all my resources (internet tutorials, books, etc.). I don't know what I am doing wrong and why it is not working.

This is the CSS style sheet I am using for this page:

/* CSS Document */
<style type="text/css">
div#container {
width: 80%;
margin-top: 0px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
div#header {
padding: 0px;
margin: 10px 10px 10px 11px;
text-align: center;
}
div#navbar {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 15%;
padding: 0px 5px 5px;
margin-left: 8px;
}
div#maintext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #8C6539;
border-left-color: #8C6539;
color: #4A4131;
padding: 0px;
margin-left: 20%;
background-image: url(pictures/taefer.jpg);
}
div#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #E3D0BB;
padding: 0px;
margin: 5px;
text-align: center;
clear: both;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #4F4233;
font-weight: bold;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #4A4131;
font-weight: bold;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #B09D86;
font-weight: bolder;
text-decoration: none;
}
</style>

Any help with this is very much appreciated!!!

Svenja

[herkalees]

Can you put this online somewhere so I/we can see how it renders in a browser?

[svenjafour]

Would this work?

http://webpages.charter.net/svenjafo.../knittingstyle

[herkalees]

Well, not really, I'd like to see the page rendered in a browser instead of a list of it's code. Can you do that for us, it'll help?

[svenjafour]

I may not understand exactly what you mean by "rendered in a browser"... I posted a link to the page in my first post - here it is again:

http://webpages.charter.net/svenjafo...s/template.dwt

If there's any other way I should post this, please let me know. Thank you so much!

Svenja

[Rob]

We need a link to the page on your WEBSITE.

Ending in .htm or whatever.

We dont want a dreamweaver template coz most of us dont have dreamweaver (or any other tools that mess with your code)

[svenjafour]

Oh, I understand. Sorry for the confusion on my part - me.
Here we go:

http://webpages.charter.net/svenjafour/Homepage/

Thanks again!

Svenja

[muneepenee]

1. yu hav it now (sorta)...heder at top kross full width, then 2 columns, then footter belo & kross full width.
2. Yu yuze absolute positioning & spesifi the length av "maintext". This will werk oenlee if yu keep sizes. The length av maintext is longer than the left column, no yu will get emptee area belo the left column.
3. If yu add stuff on left til it get tu long...it overlap the footer. Yu kan prevent this bi spesifi hite av left=hite av rite.
or yu kan put both inside an objekt so both foersed tu hav same length (hite).
4. in the absolute position av maintext...yu spesifi left & rite=bad. yu shood spesifi left (if yu wanna keep the absolute position).
5. yu spesifi the z-index. Theers no need. Hedder will never overrite mainbody or footer.
if yu werry bout mainbody overlapping footer, fix it other waes.
Yu yuze absolute position, so if yu du the math rite, em wont overlap.
----------------------------
It is eezeer tu get rid av the positioning & let thangs flo natural.
Hedder is first in the file, so it will be at the top.
Tu get 2 columns side-bi-side...eezeest wae is put em in a tabel...2 td's inside 1 tr.
if need be, yu kan make the left column a tabel inside the td.

[svenjafour]

Thank you so much for the help. I caugh the flu and haven't been able to work on the website. Will let you know if it worked. Thanks again!

Svenja

[benbramz]

not bird flu i hope

Originally Posted by svenjafour

Thank you so much for the help. I caugh the flu and haven't been able to work on the website. Will let you know if it worked. Thanks again!

Svenja

[svenjafour]

Not exactly Some kind of stomach virus, I think. I did try the table version this evening and I am very happy with the results. Sometimes, back to basics is much better than trying to do complicated CSS layouts (at least for a beginner like me...). Thanks again everyone for all the help!

Svenja

[benbramz]

(i didnt help) but your welcome!

get well soon eh!

[svenjafour]

Thank you. Feeling better today, but still not 100%. If I run into any other CSS probs, I'll post again. You guys are so nice and helpful!

Svenja

[benbramz]

or are we....could it be another cunning webforumz deception....

lol glad to see ur feeling better