need help on layout (Newbie)

Forum Moderators: not2easy

Message Too Old, No Replies

need help on layout (Newbie)

looks fine in IE, kind of bad in Mozilla

mongoloid001

6:54 pm on Mar 3, 2004 (gmt 0)

Hi, I am having trouble with fixing the layout of a simple page. Somehow browsers do not want to listen to me:).

Ok, more specific: how can I make sure all the div's will have same margin in between.

Thanks!

[edited by: mongoloid001 at 7:54 pm (utc) on Mar. 3, 2004]

edisraf321

7:45 pm on Mar 3, 2004 (gmt 0)

Style the Div element to your liking. You want space on the bottom of each div, add a margin to the bottom.


div {
 margin-bottom: 1em;
}

This is just one of many ways to get the result you want.

-Chris

grahamstewart

7:57 pm on Mar 3, 2004 (gmt 0)

also always start your page with a full DOCTYPE declaration - that will help to minimise differences between browsers and will allow you to validate your page with w3c [validator.w3.org].

A good doctype to aim for when creating a new site is the HTML4 Strict doctype which looks like this..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

mongoloid001

7:57 pm on Mar 3, 2004 (gmt 0)

Ok, got that! But it caused another problem. The div that's floating on the right side is cutting up the footer div. How do I keep the content of a div together?

Table is so much easier:).

grahamstewart

8:12 pm on Mar 3, 2004 (gmt 0)

You can ensure the footer clears any floating divs by setting

clear:both

in its CSS.

mongoloid001

8:21 pm on Mar 3, 2004 (gmt 0)

What could be wrong with the following:

document.write("<p>");
document.write("This page was last updated on "); document.write(DOWArray[(LastModDate.getDay()+1)],", ");
document.write(MOYArray[(LastModDate.getMonth()+1)]," ");
document.write(LastModDate.getDate(),",,(LastModDate.getYear()+1900));
document.write(".");
document.write("</p>");

------------------------------------------------------
Line 124, column 20: end tag for element "P" which is not open (explain...).

I don't seem to be able to fix the last error. Otherwise the page looks fine in both Mozilla and IE. But still the layout is not entirely the way I wanted. In IE, the footer is parallel with the floating div...

Here is the page link: [j2e-translate.sourceforge.net...]

Thanks for the help!

edisraf321

8:40 pm on Mar 3, 2004 (gmt 0)

grahamstewart said:

You can ensure the footer clears any floating divs by setting clear:both in its CSS.


div#footer {
clear: both;
}

That should put the footer below the floating nav box.

-Chris

mongoloid001

9:19 pm on Mar 3, 2004 (gmt 0)

oh yeah, that's right. thanks! now it's getting better:).