www.webdeveloper.com
Results 1 to 4 of 4

Thread: Move div position based on content

  1. #1
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292

    Smile Move div position based on content

    I am wanting to use full css on a page and not use tables but struggling to get something to work

    I have a div element for the top the bottom and the middle and I need the bottom div to be moved to the bottom of the middle div element, which will allow the middle div element to contain content of varying size and the footer content in the bottom div element will always be positioned at the very bottom of the middle div element and everything will line up properly

    I know its probably something simple i am overlooking, but I need help

    Can anyone tell me what css code I would use for each of the 3 divs to position them underneath each other and make it so the bottom div element starts where the middle div element ends regardless of the height of the middle div element which will not have aset height but will be beased on the length of the text it contains

    Thanks in advance

    <div id="top">fixed size header image here</div>
    <div id="middle">main content here height changes depending on length of content</div>
    <div id="bottom">fixed size footer image here</div>
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    I would add a container div as well, it should contain the three other divs. Then it's really quite simple, though you might like to change my color scheme
    CSS
    Code:
    #container {
    width: 960px;
    margin: 0px auto;
    }
    #top {
    height: 100px;
    background: #e00;
    }
    #middle {
    background: #ee0;
    }
    #bottom {
    height: 100px;
    background: #0d0;
    }
    HTML
    Code:
    <div id="container">
    <div id="top">fixed size header image here</div>
    <div id="middle">main content here height changes depending on length of content</div>
    <div id="bottom">fixed size footer image here</div>
    </div>
    So, now that all three div's are contained, the bottom div will always be under the middle div regardless of the height of the content in the middle div.

  3. #3
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    Thanks, tried your suggestion and still having some errors, made a few modifications to get things to line up correctly but still not looking right

    lawsmichigan.com for the page im building

    a header graphic a footer graphic and a middle graphic which is set as background repeating down the page depending on size of the middle div content but there is a gap between top and middle and middle and bottom??

    Any advice on where I went wrong

    You can check out my source on the above site
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  4. #4
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    never mind, I decided to get rid of all the other divs and just put the images all into one div and it seems to work how I need it to

    Thanks anyway
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles