Resolved Div Position problem

Asher01 · 08-31-2011, 08:07 AM

I am trying to set up this site:

http://www.oliveprocessors.com.au/

I seem to be having problems with the div's.. there is a large gap at the top and to the left when I use them.

There are 5 div's in total:

I've ID's them for now as I will be using CSS once I figure out how to properly use the Hosting Site. They are called: Container, Header, Menu, Content and Footer.

Container

Code:

<div id="container" style="width:1024px;height:768px">
</div>

Header

Code:

<div id="header" style="height:10%;background-color:#000000;">
</div>

Menu

Code:

<div id="menu" style="height:85%;width:13%;float:left;background-color:#000066;">
</div>

Content

Code:

<div id="content" style="height:85%;width:87%;float:right;background-color:#000000;">
</div>

Footer

Code:

<div id="footer" style="background-color:#707070;text-align:center;background-color:#000000;">
</div>

Of course, there is html inside each div, which can be seen via looking at my page source.
As always, I've first checked it all verifies without any problems at http://validator.w3.org.

So I'd be really grateful if somebody could point out what it is that I've made a mistake on/missed/forgotten/never learned.

Also, I only have HTML on this page at the moment as I'm having problems understanding how to use the webhosting.. can somebody please direct me to where I can ask for help on this?

Cheers,
Asher

coothead · 08-31-2011, 10:19 AM

Hi there Asher01,

both the body and h1 elements have default margins.

Adding these two rules to your stylesheet...

Code:


body {
    margin:0;
 }
h1 {
    margin-top:0;
 }

...will resolve the issue.

coothead

Asher01 · 08-31-2011, 11:08 AM

Thank you Coothead,

That fixed removed the gaps at the top and the left hand side.
It didn't remove the gap at the bottom below the footer though, any idea about that one?

Also, could anybody give me feedback on one small issue?

Code:

<div id="container" style="width:1024px;height:768px">

As you see, I've made the webpage 1024 by 768 as for some reason, I have problems using 100% with the container div... probably as it doesn't define 100% of what exactly...
However, I understand people have larger or, sometimes, smaller screens. How would it show for them? A smaller screen I assume you'd have scrollbars.. but larger screens you might get annoying blank spaces?
How can I get it set at least the width to 100% of their monitor size? I vaguely remember something about an 'auto' attribute....

resdog · 08-31-2011, 02:46 PM

If you don't designate the width of a div, the default is 100% of the window width.

of course, you will also have to adjust your other divs so it would truly be a fluid site.

teedoff · 08-31-2011, 02:53 PM

There are many tutorials for liquid layouts on the web. Here is one I like very much.

As far as the gap below your footer. You have your container with a define height in pixels: 768 I believe. But your menu and content divs and set at 85% height of their containing element with of course is the container div.

You should download and use firebug fro firefox. Its free and very useful for debugging coding issues.

Asher01 · 08-31-2011, 03:27 PM

Quote:

Originally Posted by teedoff

As far as the gap below your footer. You have your container with a define height in pixels: 768 I believe. But your menu and content divs and set at 85% height of their containing element with of course is the container div.

Yes, I have the containing div as 768 Pixels and the Menu and Content div's are set to 85% of that... however the Header Div is set as 10% so that should leave 5% for the footer.

If I set the footer to 5% it vanishes... if I leave it as it, it seems to only covers half of that 5%. Either that or there is somehow being placed an extra gap between the bottom of the containing Div and the Body.

teedoff · 08-31-2011, 03:34 PM

What happens if you change the menu and content divs to 100%?

Asher01 · 08-31-2011, 03:49 PM

Quote:

Originally Posted by teedoff

What happens if you change the menu and content divs to 100%?

Logic says that all hell would break lose...

Oh and I think I just figured it out... I decided to make a HTML model without anything but coloured div's on my computer.
I somehow, managed to get it right... so after checking every single difference I found out that on my webpage I didn't have float:right; in the Footer Div.

I wouldn't of thought it'd matter... as I don't particularly want it to float either way as the width should be 100%. However, for some reason it has to be.

If I don't, it'll automatically span remaining width to make up 100%, but not the remaining height to make up 100%.

Yet, when I add the float:right; it won't automatically fill the remaining width either... so I had to then add the height:5%;width:100%;

Funny, cause if you notice... I don't have that problem with the Header Div.

Oh well, at least it fixes the problem. Thanks of course not only to my persistence but to the helpful people here who's replies have me keep checking for alternate fixes!

Thanks everybody,

Asher

teedoff · 08-31-2011, 04:02 PM

Quote:

Logic says that all hell would break lose...

lol no it wouldn't. It works actually, had you tried it. Not sure why you'd need to float a full width footer either, but glad you worked it out.

Asher01 · 08-31-2011, 04:34 PM

Actually, now that I've fixed the problem, I've reduced the footer to only 80%.
Visually, you wouldn't notice, however the extra 20% on the left is another Div. I've done this to put the W3C Validator icons in.
The other 80% will eventually be nearly all used up.