www.webdeveloper.com
Results 1 to 3 of 3

Thread: div not expanding

  1. #1
    Join Date
    May 2006
    Posts
    104

    div not expanding

    Hi guys,

    I'm an infrequent web developer and am a bit rusty to say the least!

    I have a problem where a div won't expand to contain the content. I;ve created a simplified version of the problem which you can see here:
    http://www.alechorneantiques.com/test2.php

    See how the yellow main div is not expanding to take all of the content and is overlapping the gray footer div at the bottom of the page.

    Any ideas what may be causing this issue?

    The css code is:

    #wrapper {
    margin: 0 auto;
    width: 800px;
    text-align: left;
    background: red;
    }

    #header {
    width: 800px;
    border: 0px solid red;
    height: 145px;
    background: blue;
    }

    #content {
    width: 800px;
    border: 0px solid red;
    position: relative;
    background: yellow;
    }

    #footer {
    width: 800px;
    border: 0px solid red;
    height: 30px;
    padding-top:20px;
    background: gray;
    }

    #main{
    width: 500px;
    position: absolute;
    top: 0px;
    left: 278px;
    }

    #bookcase{

    }


    I can post the HTML code as well if it helps.

    I would really appreciate any help! It's got to be a basic problem - but it escapes me just now!

    Thanks,

    Rob.

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Your main content is set absolutely. Absolute elements do not take up space so it won't push the content area down.
    I would suggest playing around with float instead, and clearing them before closing the content element.

  3. #3
    Join Date
    May 2006
    Posts
    104
    Great, thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles