View Full Version : my div layout works on IE but not on FF. please help me. :)


hiyas
06-06-2006, 01:40 AM
it's my first time to make a div layout that stretches to the bottom of the page.. a two-column layout that stretches to fit its contents.. together with the sidebar..

i am using the height: 100% code. It works on IE but not on firefox.. can somebody help me? any other ideas other than that height:100%; code? :)

:) thanks a lot. :)

Dieter
06-06-2006, 05:33 AM
Would be a good idea to post a link to your site :buckt:

Milque
06-06-2006, 06:07 AM
Try this code

overflow: hidden;

I think that'll do the trick...

hiyas
06-06-2006, 02:34 PM
here is my page. (http://tabulas.com/~tsinelas)

that is where i test my templates.. i tried the overflow thing but it doesnt work.. ^_^

Dieter
06-08-2006, 03:50 AM
Are you using a wysiwyg (like fronpage or something like that) editor?

You should clean up your code a lot. Your structure and markup is all wrong.

This is a very simple layout that can be done with a lot less code. Before you start there are some things you need to know:

Always start out your document declaring your doctype. Doctypes are essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win.

Read about doctypes here http://www.w3.org/QA/2002/04/valid-dtd-list.html

Here's an example on how your html document should look like before you add any content at all:

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

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title on your site</title>
</head>

<body>

All your content are going between these tags (<body> and </body>)

</body>

</html>

That's the basic you need to know before you add any content. Also remember that html is a markup language, which means that you are only going to mark up your content so that the browser know what your content is. The apperance of your site must be done with css which you should put in an external file with the ending .css. To get the css to work you need to put a link to the css file in your html document, this is done by putting a link to it between your head tags like this.

<link rel="stylesheet" type="text/css" href="mystylesheet.css">

(save the css in the same folder as your html fil)

to show you how this works I have made the basic structure of your site, just open your notpad, paste this text and save as index.html

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="container">

<div id="header"></div>

<div id="navbar">This is your navbar div</div>

<div id="right">This is the div called right</div>

<div id="content">

<h1>This is the content div</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fringilla, enim et porta malesuada, dui lorem mattis erat, aliquam convallis lectus augue quis leo. Cras eget pede a mi accumsan aliquam. Duis vel quam. Aliquam scelerisque dignissim est. Etiam aliquet augue at dui. Donec eget ligula. Mauris egestas lacus in diam. ``` sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pretium nunc quis ligula. Sed quis velit. Vivamus erat quam, dictum et, rhoncus a, rutrum at, enim. Ut id nunc. Donec pretium diam eget nunc. Sed vestibulum. Aliquam sem. Curabitur pharetra. In hac habitasse platea dictumst. Praesent vulputate, mi sit amet scelerisque posuere, lorem neque pulvinar enim, non gravida pede diam et mi. Nunc eu odio in pede malesuada elementum. Pellentesque sit amet odio.</p>

</div>

<div id="footer">Copyright. Your name here. this is the footer div</div>

</div>
</body>
</html>


Now open a new blank notpad file, paste this and save as style.css:

* {margin: 0;
padding: 0;}

body {background-image: url(http://www.hutchal.clara.net/zena/tiles/tile16.jpg);
color: #CCCCCC;}

#container {width: 700px;
margin: 20px auto;
border: 10px solid #aa0000;
background-color: #000000}

#header {height: 100px;
background-image: url(http://www.geocities.com/hiyasintheskywithdiamonds/banner.jpg);}

#navbar {height: 50px;
background-color: #aa0000}

#right {width: 185px;
float: right;
}

#content {margin-right:190px;
border-right: 10px solid #aa0000;}

#footer {clear: both;
padding: 5px;
background-color: #aa0000;
text-align: center;}


This is the basic structure of your site. We have used html to markup your content (h1 for the heading and p for the paragraph) and we have used css to layout your page. Now you can add elements, fill it with more content which you mark up with html and style it with css. this gives you grat control over your site and you don't mix content and layout.

Hope this can help you :)

Neglected
06-08-2006, 04:17 AM
Works fine for me with FireFox

hiyas
06-09-2006, 09:23 PM
Mr. Dieter! Thank you very very very much. i didnt know about doctypes before.. thanks for the info. it works perfectly well. thank you very much for helping. i'll just add a few more finishing touches to do it. i am very grateful. :bow:

that's a very clear instruction/tutorial/information/all-in-one. :D

p.s. can i ask a very small question? what does the asterisk in

* {margin: 0;
padding: 0;}

do? i'm just curious.. :D

djou
06-10-2006, 02:54 AM
Mr. Dieter! Thank you very very very much. i didnt know about doctypes before.. thanks for the info. it works perfectly well. thank you very much for helping. i'll just add a few more finishing touches to do it. i am very grateful. :bow:

that's a very clear instruction/tutorial/information/all-in-one. :D

p.s. can i ask a very small question? what does the asterisk in

* {margin: 0;
padding: 0;}

do? i'm just curious.. :D

* means "all elements", so that every thing will have a margin and a padding of 0 by default. It is useful because different browsers interpret them differently, so if you put them all to 0, you get rid of several potential problems.

hiyas
06-11-2006, 08:09 AM
ooohh. thanks a lot. i learned a LOT from you guys. ^_^

hiyas
06-11-2006, 08:12 AM
ooohhh. i get it.. thanks a lot.. i learned a LOT from you guys. ^_^

glittergal
06-30-2006, 12:48 PM
Thanks for this info. It has just solved a simular problem I had!