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
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts

    Question CSS layout - make div stay at bottom?

    CSS layout, is there any way to make the div in BLUE (attached) stay at the bottom of the parent div?
    Attached Thumbnails Attached Thumbnails CSS layout - make div stay at bottom?-mydiv.jpg  
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Make its parent div position:relative; then use position:absolute on the blue div.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    student101 (07-05-2010)

  • #3
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Tried that but the rightcolumn doesn't take to 100% ?

    Code:
     
    #Content .rightcolumn {
    width:605px;
    height:100%; 
    loat:right;
    margin:0;
    padding:0;
    position:relative;
    }
     
    #Content .rightcolumn .woodinfo {
     background:#DECFAD url(../images/bar2.png) no-repeat 0 0;
     clear:both;
     border:1px solid #000;
     margin:0 10px 10px 5px;
     padding:10px 20px;
    /* Position at the bottom */ 
    position: relative; 
    top: 95%; 
    }
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Reread my post again. Also you have some errors in your CSS.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Right I see what you mean:
    Code:
     
    position: absolute; /* now play move around till it comes right */
    top: 295px; /* play till it comes right... */
    left: -2px; /* play till it comes right... */
    Edit:
    Errors?
    Ignore that last red comment, just cleaned it up...


    I have to apply different class names per page as each page contains different content - could use inline CSS for this miniscule thing once it's validated.

    Div .woodinfo now covers .data div?
    Last edited by student101; 07-05-2010 at 08:15 PM.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #6
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    That method doesn't work for me.
    I may have overdone this a bit?
    Code:
     
    body {
    text-align:center;
    margin:0;
    padding:0;
    }
    img {
    border:0 none;
    }
    a {
    outline:none;
    }
    #Content {
    font:10pt "Tahoma", sans-serif;
    text-align:left;
    width:760px;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    .topbanner {
    float:right;
    }
    p {
    font:10pt "Tahoma", sans-serif;
    }
    p.black {
    font:11px "Tahoma", sans-serif;
    color:#313C29;
    }
    p.white {
    font:11px "Tahoma", sans-serif;
    color:#fff;
    background:#313C29;
    }
    h1.heading {
    color:#060;
    font:24px "Bodoni MT Black", serif;
    float:left;
    margin:0;
    padding:20px 0 0;
    }
    .slogan {
    font:14px "Tahoma", sans-serif;
    color:#000;
    float:right;
    display:block;
    margin-right:580px;
    margin-bottom:10px;
    padding-left:30px;
    }
    h1 {
    color:#060;
    font:24px "Bodoni MT Black", serif;
    }
    h2 {
    color:#060;
    font:20px "Bodoni MT Black", serif;
    }
    #Content hr {
    display:block;
    position:relative;
    width:100%;
    clear:both;
    border-top:1px solid #313C29;
    border-bottom:1px solid #313C29;
    font-size:1px;
    line-height:0;
    overflow:visible;
    height:10px;
    background:#313C29;
    color:#313C29;
    border-right:none;
    border-left:none;
    margin:8px auto 3px;
    padding:8px 0 3px;
    }
    #Content .leftcolumn {
    width:151px;
    float:left;
    margin:0;
    padding:2px;
    }
    #Content .rightcolumn {
    width:605px;
    float:right;
    height:100%;
    position:relative;
    margin:0;
    padding:0;
    }
    #Content .rightcolumn .divfloat {
    height:130px;
    width:145px;
    float:left;
    margin:2px;
    padding:0;
    }
    #Content .rightcolumn .divfloat span {
    height:15px;
    width:100%;
    float:left;
    text-align:center;
    background:#313C29 url(../images/cat_2.gif) no-repeat right bottom;
    color:#FFF;
    margin-top:5px;
    font:10pt/10px "Tahoma", sans-serif;
    padding:5px 0 0;
    }
    #Content .rightcolumn .data {
    clear:both;
    width:590px;
    height:auto;
    top:3px;
    left:0;
    margin:0 0 10px;
    padding:5px;
    }
    #Content .rightcolumn .woodinfo {
    background:#DECFAD url(../images/bar2.png) no-repeat 0 0;
    clear:both;
    border:1px solid #000;
    position:absolute;
    top:295px;
    left:-2px;
    margin:0 10px 10px 5px;
    padding:10px 20px;
    }
    #Content .leftcolumn .divfloat {
    background:#313C29;
    color:#FFF;
    }
    #Content .leftcolumn .divfloat p,#Content .leftcolumn .divfloat2 p {
    margin:5px;
    padding:5px;
    }
    #Content .leftcolumn .divfloat2 {
    background:#DECFAD;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    border-left:1px solid #000;
    color:#000;
    }
    #Content .rightcolumn .data p {
    font:10pt "Tahoma", sans-serif;
    margin-right:5px;
    margin-left:25px;
    }
    #Content .rightcolumn .data p .green {
    color:#060;
    font:15px "Bodoni MT Black", serif;
    margin:0;
    padding:0;
    }
    #Content .rightcolumn .data p a:hover {
    color:#060;
    text-decoration:none;
    }
    #Content .rightcolumn .woodinfo .floatright {
    margin-bottom:5px;
    padding:2px;
    }
    #Content .rightcolumn .woodinfo .floatright p {
    font:10pt "Calibri", sans-serif;
    margin:5px 5px 5px 0;
    padding:10px 0 0;
    }
    .clearboth {
    clear:both;
    }
    #Content .footer {
    background-color:#313C29;
    bottom:0;
    clear:both;
    color:#DECFAD;
    height:35px;
    text-align:center;
    font:10pt/30px "Tahoma", sans-serif;
    }
    h3,h4 {
    color:#060;
    font:18px "Bodoni MT Black", serif;
    }
    #Content .rightcolumn .data p a,#Content .footer a:link {
    color:#DECFAD;
    text-decoration:underline;
    }
    #Content .footer a:active,#Content .footer a:hover,#Content .footer a.current {
    text-decoration:none;
    }
    .entersite {
    color:#313C29;
    font:18px small-caps Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif;
    margin:15px 0 0;
    padding:0;
    }
    .entersite a {
    color:#313C29;
    text-decoration:underline;
    }
    .entersite a:hover {
    color:#313C29;
    text-decoration:none;
    }
    #Content .rightcolumn .data p a:visited,#Content .rightcolumn .data p a:active,#Content .footer a:visited {
    color:#DECFAD;
    }
    HTML:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>title title title title title title title title</title>
    <
    link href="css/menu.css" rel="stylesheet" type="text/css" />
    <
    link href="css/style.css" rel="stylesheet" type="text/css" />
    <!--[if 
    IE 6]>
    <
    style type="text/css">
    #Content {
    margin-left200px;
    }
    #Content .leftcolumn {
    width:150px;
    float:left;
    margin:0;
    padding:2px;
    }
    #Content .rightcolumn {
    width:580px;
    float:right;
    margin:0;
    padding:0;
    }
    #Content .rightcolumn .divfloat {
    height:130px;
    width:140px;
    float:left;
    margin:2px;
    padding:0;
    }
    #Content .rightcolumn .divfloat img {
    width:140px;
    height:106px;
    }
    #Content .rightcolumn .woodinfo {
     
    position:absolute;
     
    top:280px;
     
    left:10px;
    }
    </
    style>
    <![endif]-->
    <!--[if 
    IE 7]>
    <
    style type="text/css">
    #Content .rightcolumn .woodinfo {
     
    background:#DECFAD url(images/bar2.png) no-repeat 0 0;
     
    clear:both;
     
    border:1px solid #000;
     
    position:absolute;
     
    top:296px;
     
    left:10px;
     
    margin:0 0 10px;
     
    padding:15px 20px 10px;
    }
    </
    style>
    <![endif]-->
    </
    head>
    <
    body>
    <
    div id="Content">
    <
    img src="images/pagebar.jpg" width="760" height="1" />
    <
    div class="topbanner"><img src="images/autogen/pic1.jpg" alt="About Us" name="About Us" title="About Us" width="209" height="26" /></div>
    <
    h1 class="heading">HEADER</h1>
    <
    div class="slogan">SloganSloganSlogan</div>
    <!--<
    hr />-->
    <
    img src="images/bar.png" width="758" height="11" style="clear:both; margin: 0 0 3px 0;" />
    <
    div class="leftcolumn">
    <
    div id="menu">
    <
    a href="home.php"><span>Home</span></a>
    <
    a href="about.php" class="current"><span>About Us</span></a>
    <
    a href="service.php"><span>Service</span></a>
    <
    a href="location.php"><span>Location</span></a>
    <
    a href="contact.php"><span>Contact Us</span></a>
    </
    div>
    <
    div class="divfloat"><img src="images/top1.gif" width="151" height="17" hspace="0" vspace="0" />
    <
    p>This copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was insertedThis copy is used for placement only.</p>
    </
    div>
    <
    div class="divfloat2">
    <
    img name="" src="images/pic2.jpg" width="150" height="100" alt="" />
    <
    p>This copy is used for placement only. <br />
      
    It is not meant to be read. </p>
    </
    div>
    <
    div class="divfloat">
    <
    p>This copy is used for placement onlyIt is not meant to be read. </p>
    <
    p>Designers use this to show clients how copy would look if it was inserted.</p>
    <
    p>&nbsp;</p>
    <
    img src="images/top2.gif" width="151" height="17" hspace="0" vspace="0" align="absbottom" />
    </
    div>
    </
    div>
    <
    div class="rightcolumn">
      
    <
    div class="data">
    <
    p>This copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was insertedThis copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was insertedThis copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was inserted.</p>
    </
    div>
    <
    div class="woodinfo">
    <
    div class="floatright">
    <
    p style="text-align:justify;"><img src="images/pic3.jpg" alt="" width="100" height="133" align="left" hspace="10" vspace="0">
    This copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was insertedThis copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was inserted.</p>
    <
    p style="text-align:justify; padding:5px;">This copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was insertedThis copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was inserted.</p>
    </
    div>
    <
    div class="floatright">
    <
    p style="text-align:justify;"><img src="images/pic4.jpg" alt="" width="100" height="133" align="left" hspace="10" vspace="0"
    This copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was insertedThis copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was inserted.</p>
    <
    p style="text-align:justify;">This copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was insertedThis copy is used for placement onlyIt is not meant to be readDesigners use this to show clients how copy would look if it was inserted.</p>
    <
    p>&nbsp;</p>
    </
    div>
    <
    br />
    </
    div>
    </
    div>
    <
    div class="footer">: <a href="home.php">Home</a> : : <a href="about.php" class="current">About Us</a> : : <a href="service.php">Service</a> : : <a href="location.php">Location</a> : : <a href="contact.php">Contact Us</a> :</div>
    <
    div style="text-align:center; font: 11px Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif;">Copyright © 2010 All rights reserved.</div>
    </
    div>
    </
    body>
    </
    html
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why doesn't it work for you? What part? You will have to play with z-index if you want it behind your content. Your content would also need to be in its own block level element with position:relative; so you can use z-index on it that is hire than the z-index of your woodinfo div.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Looking at that picture; there is a div wrapping the two divs - that may need to be removed and only have the two divs.

    I need to work on the div alignment to make this work.
    floats may be needed or negative margins?

    The part that doesn't work is the bottom div overlaps the top div.
    If I add more text or image to the top div you can't see them cause the bottom div takes over
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well usually the way to overcome it is to add a bottom padding to .data but the height of your woodinfo div will likely change so you can keep changing the height. Why does that div need to be at the very bottom? Why can't it just come after the .data div in normal flow?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Why does that div need to be at the very bottom? Why can't it just come after the .data div in normal flow?
    It makes it look uneven otherwise.

    Edit:
    Maybe your'e right, I need to just leave the conversion from a table to what I did and be happy.
    I can PM the links from what was to what is.
    Last edited by student101; 07-05-2010 at 10:27 PM.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:


  •  

    Posting Permissions

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