Div problems

[Rik]

Hello all,

I'm having a problem with my Div's.

On my own laptop (17 inch, 1440x900) my site looks fine, but I checked my site on another laptop (15 inch, 1024x768) and there the div is placed under the other div. How can this happen?

The divs are, div.navigatie and div.inhoud. They are floated.


div.sitecontainer {
postion: relative;
border: 6px solid #ffffff;
width: 800px;
margin: 0 auto;
text-align: left;
}

div.top {
height: 115px;
width: 794px;
}

div.navigatie {
float: left;
width: 190px;
height: 600px;
background-color: #ffffff;
}

div.inhoud {
float: right;
width: 604px;
height: 570px;
background-color: #ffffff;
padding: 15px;
}

I also got another problem: the banner in div.top looks great in IE, but in Mozilla it looks like the banner get another border, so the border of the sitecontainer is not straight anymore. Anyone formilar with this problem? The banner image is 800x115, I decreased this already but that didn't solved the problem.

Please help!!

[drhowarddrfine]

The width of the container is 800px and the total width of the two inside divs is 809px, plus any default margin involved. The browser is making room by dropping one div down.

The banner problem, it's impossible to tell without a link or the complete code.

[Rik]

The width of the container is 800px and the total width of the two inside divs is 809px, plus any default margin involved. The browser is making room by dropping one div down.

The banner problem, it's impossible to tell without a link or the complete code.

Thank you for your quick reply. But can you explain what I have to change?
I just started with designing, soo I'm pretty a rookie. In my opinion the 2 inside divs are in total 794 px. Or do I forget something?

div.navigatie {
width: 190px;
}

div.inhoud {
width: 604px;
}

This is the link to the site, in Mozilla the banner (top) is different than in IE.

Link

[drhowarddrfine]

You are forgetting the 15px of padding which brings the total over 800.

[Rik]

I tried everything, but can't solve it...

The strange thing (for me) is that on my 17 inch laptop everything looks great in IE (Mozilla still has the banner problem). But on the 15 inch screen the lay-out is messed up.

What do I have to change? Can you be more specific please..

Thanks already!

[drhowarddrfine]

You have a <link> in the body of page. That must be moved up into the head where the other one is.

A little complicated to explain. In sitecontainer, you have a 6px border which is what you want. But the divs below .top are floated, which removes them from the normal flow, so that border is replaced by the body background image. This is what is supposed to happen, the way it's coded, and FF is performing correctly while IE is not.

Removing the 6px border fixes it in FF but you don't have the white border anymore.

I'm going to need you to fix that link before I can go on.

[Rik]

You have a <link> in the body of page. That must be moved up into the head where the other one is.

A little complicated to explain. In sitecontainer, you have a 6px border which is what you want. But the divs below .top are floated, which removes them from the normal flow, so that border is replaced by the body background image. This is what is supposed to happen, the way it's coded, and FF is performing correctly while IE is not.

Removing the 6px border fixes it in FF but you don't have the white border anymore.

I'm going to need you to fix that link before I can go on.

I hope you mean the <link rel="stylesheet".................."zijnavigatie.cs s"/>. I have moved this link to the head.

I understand your explanation about the border and float..why did they made more browsers, it's soo complicated sometimes :-) I removed the border, and will make a border around the image itself. Much more easier I think.

So I did the things you asked me to do. What's the next step?

Thanks!

[drhowarddrfine]

For your <link>'s, you are using Xhtml end tags but have specified this is a html document. I'm talking about the />. Remove the slashes on both links.

To use international character sets, you need to specify that by adding this to your head:
<meta http-equiv="content-type" content="text/html;charset=utf-8">

Also, the accented 'e' needs that charset id which I can't think of right now.

Change <style> to <style type="text/css">

Move the background image in <body> to css like this:
body{
background-image:url("image.jpg");
}

In sitecontainer, you have position misspelled.

Please see the article for this board, at the top, about validating.