Advanced Search

Results 1 to 2 of 2

Thread: Align nested div to bottom

  1. #1
    Join Date
    Nov 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Align nested div to bottom

    I hope someone can help, I would greatly appreciate it. I just can't get this to work in Firefox, IE and Safari are fine. I want the div to be aligned to the bottom of the parent div, in firefox, it aligns to the bottom of the browser. Thanks!

    Here's my code:

    <head>

    <style type="text/css">

    body{
    height: 100%;
    margin: 0;
    padding: 0;
    }

    #body {
    margin: 0px;
    display: table;
    width: 1000px;
    position: relative;
    height: 100%;
    background-color: #0000FF;
    }

    #content_left {
    float: left;
    width: 245px;
    background-color: #FF6633;
    }

    #content_right {
    width: 679px;
    float: left;
    background-color: #FFFF00;
    }

    #side_bottom {
    position: absolute;
    bottom: 0px;
    background-color: #FF00FF;
    clear: both;
    }
    </style>

    </head>

    <body>
    <div id="body">

    <div id="content_left">Left<br />
    Content<br />
    Goes <br />
    Here<br />
    <br />

    <div id="side_bottom">side bottom</div>

    </div>

    <div id="content_right">right</div>

    </div>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    See if removing the higlighted helps:
    Code:
    #side_bottom {
    position: absolute;
    bottom: 0px; 
    background-color: #FF00FF;
    clear: both;
    }
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

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