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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get text to align to bottom of DIV

    Hi

    I'm working with a nested DIV - I'd like the text to align right down at the bottom. The DIV is called 'artist_name'

    Here's the CSS:

    ---------------------

    #artist_title {


    width: 320px;
    height: 35px;
    background-color:#FFFFFF;
    margin-bottom:7px;

    }

    #artist_title_inside_left {

    width: 50px;
    height:18px;
    float:left;
    padding-left:10px;
    padding-top:12px;
    vertical-align:bottom;
    }

    #artist_name {
    width:190px;
    height:28px;
    position:relative;
    float:left;
    }

    #artist_title_inside_right {

    width: 260px;
    height: 35px;
    float:right;

    }

    -----------------------

    Here's the html:
    ------------------------

    <div class="style1" id="artist_title">
    <div id="artist_title_inside_left"><img src="http://www.bigbadroo.com.au/popbeat/Website/images/artist.gif" style="float: left;" alt="Artist" />

    </div>




    <div id="artist_title_inside_right"><div id="artist_name">
    <h2 class="style2"><span class="style9">.</span><br />
    Mike Mathieson</h2>
    </div>
    <h1>Solo<br/>
    Band<br/>
    Tribute Show </h1>
    </div>
    </div>
    -------------------------


    as it is, the text sits near the top of the DIV.

    What am I doing wrong?

    Cheers

    Shaun

  • #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
    Your question is confusing. So you want artist_name to be at the very bottom of the containing div? Also your content exceeds the height you have set. I think this is what you want
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    #artist_title {
    width: 320px;
    background-color:#FFF;
    margin-bottom:7px;
    }
    #artist_title_inside_left {
    width: 50px;
    padding-left:10px;
    padding-top:12px;
    }
    #artist_name {
    width:190px;
    height:28px;
    position:absolute;
    bottom:-35px;
    right:0;
    }
    #artist_title_inside_right {
    width: 260px;
    float:right;
    position:relative;
    }
    </style>
    </head>
    <body>
    <div class="style1" id="artist_title">
    	<div id="artist_title_inside_left"><img src="http://www.bigbadroo.com.au/popbeat/Website/images/artist.gif" alt="Artist"></div>
    	<div id="artist_title_inside_right">
    		<div id="artist_name">
    			<h2>.<br>Mike Mathieson</h2>
    		</div>
    		<h1>Solo<br>
    			Band<br>
    			Tribute Show </h1>
    	</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Thanks for the info.

    I just want any text that's within <div id="artist_name"></div> to be aligned at the bottom of it - how do I do that? I've tried the vertical align attribute, but it deosn't work.

    Cheers

    Shaun

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    63
    Thanks
    0
    Thanked 3 Times in 3 Posts
    try putting "position: relative;" on the artist_name div. Then put a div around the text and set it to:
    Code:
    position: absolute;
    bottom: 0px;
    Web hosting by coders, for coders: php hosting - Magento eCommerce hosting - perl hosting - check us out!

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers - still no joy though.

    If you view the page in Firefox at:

    http://www.bigbadroo.com.au/popbeat/..._mathieson.php

    And choose 'view style information' from the CSS, you may get a better idea of what's going on with the DIVs - I don't understand why I can't get the content of artist_name to vertically align at the bottom.

    Cheers

    Shaun


  •  

    Posting Permissions

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