Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Question Div Position problem

    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
    Last edited by Asher01; 08-31-2011 at 04:35 PM. Reason: Added Resolved Tag
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,722
    Thanks
    0
    Thanked 240 Times in 235 Posts
    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

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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....
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 08-31-2011 at 02:57 PM.
    Teed

  • #6
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by teedoff View Post

    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.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    What happens if you change the menu and content divs to 100%?
    Teed

  • #8
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by teedoff View Post
    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
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #10
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •