Greetings.
Erm, left: 20% and also left: 100px?
I don't get you - 2 divs?
Errr, sorry but I really don't get the concept.

By the way, I noticed that things are much "larger" in Mozilla compared to IE and Opera eh. What can I do to balance it up so that it not only looks fine in Mozilla and also don't look to small in IE when I try to reduce the size of elements displayed in Mozilla.

<div id="homepage>
<div>
Content
</div>
</div>

#homepage {
margin-left: 100px;
}

#homepage div {
margin-left: 20%;
}

Basically your left bar is width 20%. But it's placed 100px from the edge. That makes it 20%+100px. You can't make that in pixels or %, so mozilla is adding 20% +80% (=100%) and then it's adding another 100px to 100%, hence the scrollbar.

You mean font sizes by 'much larger'?

Greetings.
Oh, I get you.
Thanks a lot for that explanation.

Nope, font sizes are the same.
It's just that the size of the divs, err, never mind, first.
I guess it's something related to what you have just explained.
Let me first try to apply what you have just said, and see how thing goes.
Thanks a lot.

NP!
There's another thing in there that I should really explain: the box model. Ryan's got a good explanation here: http://www.ryanbrill.com/archives/cs...model_and_you/ The way he describes here is the proper way as used by mozilla, where padding etc is added to width, whilst IE cheats and does it the other way - subtracting padding etc from the width.

Another explanation by Tantek: http://tantek.com/CSS/Examples/boxmodelhack.html
However the solutions he proposes here are unnecessary if you nest divs - one div with width, another inside with a margin or padding, and so on. This way is futureproof, whereas other future browsers may or may not work with the hacks suggested on the tantek link.

Hopefully that gives you another insight into more of your problems

[quote=red_evolve]Greetings.
This is the bit of code where the box model stuff applies. If you've figured out those links you'll realise IE is saying 80%-25%=55% wide, whilst Mozilla is saying 80%+25%=105%. :!:

Greetings.
Thanks for your continuous support.
I understand what you're saying there.
What I still can't figure out is that, If this is the case, how can I balance things up in IE & Mozilla?

On the other hand, if I opt to not use nested divs, would something like this be easier and as efficient?

Yes that would do the job. The problem only applies where you have padding or margins as well as width. Nesting them is the ideal way to split them, but you can simply avoid using them, as you suggest.

There are a number of ways to achieve the two column layout.
One would be

<div id="ads">
Advertisements
</div>

<div id="homepage">
Content
</div>

#ads {
position: absolute;
left: 0;
top: 0;
width: 20%;
}
#homepage {
position: absolute;
left: 20%;
top: 0;
width: 80%;
}

However this screws up printing the page, so this might be better:

<div id="ads">
Advertisements
</div>

<div id="homepage">
Content
</div>

#ads {
position: absolute;
left: 0;
top: 0;
width: 20%;
}
#homepage {
margin-left: 20%;
}

There are thousands of css layout sites: http://www.google.com/search?q=css+l...utf-8&oe=utf-8

Or you can check out layoutomatic, which can automatically generate the box model hacks for you: http://www.inknoise.com/experimental/layoutomatic.php

Greetings.
Thanks a lot.
The inknoise one is definitely a great guide towards css layouts and should serve as a great BASIS for other more complicated layouts.

Thanks a lot for that.
Well, case solved! Hope there'll be no more complications in my road to building a presentable website.
And thanks again, DaveSW.

NP
Good Luck completing your site to your satisfaction!

Greetings.
Hehe...one more problem here.
It's not about CSS but I thought I should just continue with this thread.
I have a page and it's a gallery of pictures.
On top, there's an empty square.
Below, there are pictures. When a picture is clicked, the larger version would be targeted onto that empty square.
I use javascript here. Things worked fine, again, in IE and Opera but not Mozilla.
The function goes something like this:-
FYI, "gallery" is an Iframe - accomodates all the tiny pictures.